线性渐变 linear-gradient
1.用角度确定方向
.color{
width: 800px;
height: 300px;
background:-webkit-linear-gradient(30deg,red,green,blue);
}
<div class="color"></div>
30deg指的是30度方向
注意:使用度数的时候,-webkit-和正常版本下的角度是互余关系
2.用英文单词确定方向
.color{
width: 800px;
height: 300px;
background: linear-gradient(to right,red,green,blue,pink);
}
<div class="color"></div>
to right 指的是方向从左往右
注意:当使用英文单词作为方向的时候,是否添加-webkit正好是相反的,就是方向前加to,则linear-gradient不用加-webkit-,反之则需要加-webkit-
(to bottom、to top、to right、to left、to bottom right)这些都可以作为方向
重复的线性渐变 repeating-linear-gradient
.color{
width: 800px;
height: 300px;
background: repeating-linear-gradient(30deg,red 10%,green 20%,blue 20%,pink 30%);
}
<div class="color"></div>
径向渐变radial-gradient
重复的径向渐变 repeating-radial-gradient
#grad {
width: 200px;
height: 200px;
background: -webkit-radial-gradient(red, yellow, blue);
/* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, yellow, blue);
/*Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, yellow, blue);
/*Firefox 3.6 - 15 */
background: radial-gradient(red, yellow, blue);
/*标准的语法 */
}
<div id='grad'></div>