一、CSS3渐变类型
渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients):线性渐变和径向渐变
1.1 线性渐变
(Linear Gradients)- 向下/向上/向左/向右/对角方向;分为8中情况
(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%);
1.2 径向渐变
(Radial Gradients)- 由它们的中心定义,分为种情况
(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%);
二、CSS3 渐变实例
实例代码
index.scss
.box{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
.box-body{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
.item-height{
height: 6%;
}
.gradient-11{
background-color:red;
}
.gradient-12{
background-color:orange;
}
.gradient-13{
background-color:blue;
}
.gradient-14{
background-color:brown;
}
.gradient-15{
background-color:gray;
}
.gradient-16{
background-color:green;
}
.gradient-17{
background-color:yellow;
}
.gradient-18{
background-color:cornflowerblue;
}
.gradient-19{
background-color:aqua;
}
.gradient-21{
background-color:darkblue;
}
.gradient-22{
background-color:forestgreen;
}
.gradient-23{
background-color:greenyellow;
}
.gradient-24{
background-color:lightcoral;
}
}
}
index.wxml
<!--index.wxml-->
<view class="box">
<navigation-bar title="监控系统" back="{{false}}" color="white" background="#33393b"></navigation-bar>
<view class="box-body">
<view class="item-height gradient-11">11</view>
<view class="item-height gradient-12">12</view>
<view class="item-height gradient-13">13</view>
<view class="item-height gradient-14">14</view>
<view class="item-height gradient-15">15</view>
<view class="item-height gradient-16">16</view>
<view class="item-height gradient-17">17</view>
<view class="item-height gradient-18">18</view>
<view class="item-height gradient-19">19</view>
<view class="item-height gradient-21">21</view>
<view class="item-height gradient-22">22</view>
<view class="item-height gradient-23">23</view>
<view class="item-height gradient-24">24</view>
</view>
</view>
2.1 线性渐变:从上至下
.gradient-11{
background:linear-gradient(red,blue);
}
2.2 线性渐变:从左至右
.gradient-12{
background:linear-gradient(to right, red,blue);
}
2.3 线性渐变:对角
.gradient-13{
background:linear-gradient(to bottom right,red,blue);
}
2.4 线性渐变:指定角度
.gradient-14{
background:linear-gradient(120deg,red,blue);
}
2.5 线性渐变:从上到下,带有多个颜色结点
.gradient-15{
background:linear-gradient(red,blue,green);
}
2.6 线性渐变:带有彩虹颜色和文本
.gradient-16{
background:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
2.7 线性渐变:从左至右,带有透明度
.gradient-17{
background:linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
2.8 线性渐变:重复线性渐变
.gradient-21{
background:radial-gradient(red,green,blue);
}
2.9 径向渐变:颜色结点均匀分布
.gradient-21{
background:radial-gradient(red,green,blue);
}
2.10 径向渐变:颜色结点不均匀分布
.gradient-22{
background:radial-gradient(red 5%,green 20%,blue 60%);
}
2.11 径向渐变:圆形
.gradient-23{
background:radial-gradient(circle,red,yellow,green);
}
2.12 径向渐变:重复径向渐变
.gradient-24{
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}