微信小程序——CSS3渐变

SS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients):

说明

1、线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向;

2、径向渐变(Radial Gradients)- 由它们的中心定义。

线性渐变

(1)从上到下渐变(默认情况)

background: linear-gradient(red, blue);

(2)从左到右渐变

background: linear-gradient(to right, red , blue);

(3)对角方向渐变

background: linear-gradient(to bottom right, red , blue);

(4)指定角度渐变

background: linear-gradient(120deg, red, blue);

(5)从上到下,带有多个颜色结点渐变

background: linear-gradient(red, green, blue);

(6)带有彩虹颜色和文本渐变

background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

(7)从左至右,带有透明度

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

(8)重复线性渐变

background: repeating-linear-gradient(red, yellow 10%, green 20%);

2.径向渐变

(1)颜色结点均匀分布

background: radial-gradient(red, green, blue);

(2)颜色结点不均匀分布

background: radial-gradient(red 5%, green 15%, blue 60%);

(3)形状为圆形渐变

background: radial-gradient(circle, red, yellow, green);

(4)重复径向渐变

background: repeating-radial-gradient(red, yellow 10%, green 15%);

实例

java 复制代码
<view class='container'>
  <view class='demo view11'>11</view>
  <view class='demo view12'>12</view>
  <view class='demo view13'>13</view>
  <view class='demo view14'>14</view>
  <view class='demo view15'>15</view>
  <view class='demo view16'>16</view>
  <view class='demo view17'>17</view>
  <view class='demo view18'>18</view>
  <view class='demo view19'>19</view>
  <view class='demo view20'>20</view>
  <view class='demo view21'>21</view>
  <view class='demo view22'>22</view>
  <view class='demo view23'>23</view>
</view>

线性渐变:从上至下

java 复制代码
.view11 {
   background: linear-gradient(red, blue);
}

线性渐变:从左至右

java 复制代码
.view11 {
   background: linear-gradient(red, blue);
}

线性渐变:对角

java 复制代码
.view13 {
   background: linear-gradient(to bottom right, red , blue);
}

线性渐变:指定角度

java 复制代码
.view14 {
   background: linear-gradient(120deg, red, blue);
}

线性渐变:从上到下,带有多个颜色结点

java 复制代码
.view15 {
   background: linear-gradient(red, green, blue);
}

线性渐变:带有彩虹颜色和文本

java 复制代码
.view16 {
   background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

线性渐变:从左至右,带有透明度

java 复制代码
.view17 {
   background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

线性渐变:重复线性渐变

java 复制代码
.view18 {
   background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变:颜色结点均匀分布

java 复制代码
![.view19 {
   background: radial-gradient(red, green, blue);
}](https://img-blog.csdnimg.cn/7d650c5d847c4aeea1f88312d053e68e.png)

径向渐变:颜色结点不均匀分布

java 复制代码
.view20 {
   background: radial-gradient(red 5%, green 15%, blue 60%);
}

径向渐变:圆形

java 复制代码
.view21 {
   background: radial-gradient(circle, red, yellow, green);
}

径向渐变:重复径向渐变

java 复制代码
.view22 {
   background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
相关推荐
文心快码BaiduComate12 分钟前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
不爱编程的小方1 小时前
响应式布局
前端·css3
Async Cipher2 小时前
CSS 居中
前端·css·css3
CocoaKier4 小时前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
2501_915909064 小时前
苹果上架App软件全流程指南:iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核技巧详解
android·ios·小程序·https·uni-app·iphone·webview
2501_915921434 小时前
iOS 文件管理与能耗调试结合实战 如何查看缓存文件、优化电池消耗、分析App使用记录(uni-app开发与性能优化必备指南)
android·ios·缓存·小程序·uni-app·iphone·webview
咔咔一顿操作5 小时前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
2501_915918415 小时前
App 苹果 上架全流程解析 iOS 应用发布步骤、App Store 上架流程
android·ios·小程序·https·uni-app·iphone·webview
2501_916007475 小时前
苹果上架全流程详解,iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
ZZHow10246 小时前
微信小程序开发笔记(01_小程序基础与配置文件)
笔记·微信小程序·小程序