背景渐变--gradient

css3渐变(gradient)可以让元素在两个或多个指定的颜色之间显示平稳的过渡。

 

css3渐变分两种：线性渐变 linear-gradient---向上/向下/向左/向右/对角线方向

                        径向渐变 radial-gradient---渐变中心自定义

 

线性渐变--从上到下(默认)

#linearG1 {background: linear-gradient(red, blue);}

#linearColors1 {background: linear-gradient(red, green, blue);}

线性渐变--左右方向

#linearG2 {background: linear-gradient(to right, red , blue);}

线性渐变--对角方向

#linearG3 {background: linear-gradient(to bottom right, red , blue);}

线性渐变的每一种方向都可以自己指定--to bottom、to top、to right、to left、to bottom right等等

0deg在最上面，顺时针旋转度数增加--0deg==to top， 45deg==to up right，90deg==to right，135deg==to bottom right，

　　　　　　　　　　　　　　　　　  180deg==to bottom，-45deg(225deg)==to bottom left，

　　　　　　　　　　　　　　　　　　-90deg(270deg)==to left，-135deg(315deg)==to up left ……

background: linear-gradient(angle, color1, color2);

#linearG4 {background: linear-gradient(180deg, red, blue);}

线性渐变--使用透明度

#grad {background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}从左到右，从完全透明到完全不透明到红色

重复的线性渐变--repeating-linear-gradient() 函数用于重复线性渐变

#grad {background: repeating-linear-gradient(red, yellow 10%, green 20%);/* 标准的语法 */}

 

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);/*标准语法*/

background: radial-gradient(at center, red, black);

background: radial-gradient(circle 50px at center, red, black);

径向渐变--颜色节点均匀分布

#grad {background: radial-gradient(red, green, blue); /* 标准的语法 */}

径向渐变--颜色节点不均匀分布

#grad {background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */}

径向渐变--设置形状 ( circle 或 ellipse，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。)

#grad {background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}

径向渐变--设置渐变大小

size 参数定义了渐变的大小，它可以是以下四个值：closest-side，farthest-side，closest-corner，farthest-corner。contain 和 cover 不再有效，它们分别对应于最近端和最远角。

#grad1 { background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);}
#grad2 { background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);}

径向渐变--重复渐变／渐变的浏览器兼容性

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Opera 11.6 - 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Firefox 3.6 - 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* 标准的语法 */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}