渐变背景

<h1>背景颜色 - 渐变背景</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e5b7a8f2b71f4cc1e973011cf8e54cde&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="grid col-2 padding-sm"&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-red padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;魅红&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#f43f3b - #ec008c&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-orange padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;鎏金&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#ff9700 - #ed1c24&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-green padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;翠柳&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#39b54a - #8dc63f&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-blue padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;靛青&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#0081ff - #1cbbb4&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-purple padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;惑紫&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#9000ff - #5e00ff&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-sm"&gt; &lt;view class="bg-gradual-pink padding radius text-center shadow-blur"&gt; &lt;view class="text-lg"&gt;霞彩&lt;/view&gt; &lt;view class="margin-top-sm text-Abc"&gt;#ec008c - #6739b6&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>