css3渐变(Gradient)
1、渐变:可以让你在两个或多个指定的颜色之间显示平稳的过渡。
2、css3定义了:线性渐变(linear-gradient)、径向渐变(radial-gradient)。
3、线性渐变
从上到下(默认);
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
从左到右(linear-gradient(to right, red, blue));
从左上到右下(linear-gradient(to bottom right, red, blue));
角度(0deg):水平线与渐变线之间的角度,逆时针方向计算(linear-gradient(45dge, red, blue));
多颜色结点(linear-gradient(red, blue, green));
均匀分布和透明度(20%和 rgba(255,0,0,0.6));
重复的线性渐变(repeating-linear-gradient);