渐变处理

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

语法

background:-webkit-linear-gradient(direction, color1, color2, ...);/*Safari Opera Firefox*/
background:-moz-linear-gradient(direction, color1, color2, ...);/*Firefox*/
background:linear-gradient(direction, color1, color2, ...);/*标准语法*/

渐变方式 

	Safari	Opera	Firefox	标准的语法
从上到下	top	top	top	to bottom
从左到右	left	left	left	to right
从左上角到右下角	left top	left top	left top	to bottom right

例：

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

使用角度 

语法

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

角度是指水平线和渐变线之间的角度，顺时针方向计算，0deg是从下到上渐变，90deg是从左到右渐变。 

使用-webkit-linear-gradient()和-moz-linear-gradient()函数时角度是逆时针方向计算，0deg是从左到右渐变，90deg是从下到上渐变。

background:-webkit-linear-gradient(angle, color1, color2，...);/*Safari只能用这个语法*/
background:-moz-linear-gradient(angle, color1, color2，...);/*Firefox*/

例：

 

div{background: linear-gradient(135deg, red, blue);}

 重复的线性渐变

语法

background:repeating-linear-gradient(direction,color1,color2,...);

例：

div{background: repeating-linear-gradient(to right, red 10%, blue 20%);}

使用透明度

在css中使用rgba()函数来实现颜色的透明度，rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

例：

div{
    background: linear-gradient(to right,
    rgba(255,0,0,0) 0%,
    rgba(255,0,0,0.2) 10%,
    rgba(255,0,0,0.4) 20%,
    rgba(255,0,0,0.6) 30%,
    rgba(255,0,0,0.8) 40%,
    rgba(255,0,0,1) 50%,
    rgba(255,0,0,0.8) 60%,
    rgba(255,0,0,0.6) 70%,
    rgba(255,0,0,0.4) 80%,
    rgba(255,0,0,0.2) 90%,
    rgba(255,0,0,0) 100%);
}

径向渐变

至少要定义两种颜色，也可以指定渐变的中心、形状（圆形或椭圆形）、大小。

语法

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

中心的值默认为center；shape的值可以设为circle（圆）和ellipse（椭圆），默认为ellipse；size的参数可以是以下四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

例：

 

div{background: radial-gradient(circle, red 10%, blue 20% , green 70%);}

重复的径向渐变

语法

background:repeating-radial-gradient(center,shape size,start-color,...,last-color);

div{background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);}

使用透明度

例：

 

 

div{background: radial-gradient(circle, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0) 90%);}