线性渐变linear-gradient
从上到下渐变background: linear-gradient(to bottom,red,blue);
从左到右渐变background: linear-gradient(to right,red,blue);
从左上角到右下角渐变background: linear-gradient(to bottom right,red,blue);
彩虹渐变background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
1
2
3
4
| <div id="con"></div>
<div id="conn"></div>
<div id="connn"></div>
<div id="connnn"></div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| #con{
width:200px;
height:100px;
background: linear-gradient(to bottom,red,blue);
}
#conn{
width:200px;
height:100px;
background: linear-gradient(to right,red,blue);
}
#connn{
width:200px;
height:100px;
background: linear-gradient(to bottom right,red,blue);
}
#connnn{
width:200px;
height:100px;
background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
}
|
径向渐变radial-gradient
径向渐变默认为椭圆形
匀称径向渐变background: radial-gradient(red,green,blue);
不匀称径向渐变background: radial-gradient(red 5%,green 15%,blue 60%);
圆形径向渐变background: radial-gradient(circle red,green,blue);
1
2
3
| <div class="con"></div>
<div class="conn"></div>
<div class="connn"></div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .con{
width:200px;
height:100px;
background: radial-gradient(red,green,blue);
}
.conn{
width:200px;
height:100px;
background: radial-gradient(red 5%,green 15%,blue 60%);
}
.connn{
width:200px;
height:100px;
background: radial-gradient(circle,red,green,blue);
}
|
