线性渐变(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%);}