转载至-[https://blog.csdn.net/u010381707/article/details/52491853](https://blog.csdn.net/u010381707/article/details/52491853)
在CSS3出来之前要想实现颜色渐变只能使用背景图片，CSS3渐变替代图片实现渐变效果能大大减少网络加载的时间，提升用户体验。当要出现变焦的时候CSS3实现的效果会更好。
CSS3有两种渐变类型：
- 线性渐变（从上到下， 从下到上，从左到右，从右到左，斜对角）
- 放射状渐变（从定义的中心出现放射状）
浏览器支持情况
CSS3线性渐变
为了创建线性渐变， 你至少要定义两种颜色。
css语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
代码如下：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(red, yellow);
/* For Safari 5.1 to 6.0 */
-
background:
-o-linear-gradient(red, yellow);
/* For Opera 11.1 to 12.0 */
-
background:
-moz-linear-gradient(red, yellow);
/* For Firefox 3.6 to 15 */
-
background:
linear-gradient(red, yellow);
/* Standard syntax */
-
}
若要实现从左到右渐变，则需要传入放向参数。示例如下：
对应CSS3代码：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(left, red , yellow);
/* For Safari 5.1 to 6.0 */
-
background:
-o-linear-gradient(right, red, yellow);
/* For Opera 11.1 to 12.0 */
-
background:
-moz-linear-gradient(right, red, yellow);
/* For Firefox 3.6 to 15 */
-
background:
linear-gradient(to right, red , yellow);
/* Standard syntax */
-
}
对角线渐变
你可以通过同时指定水平位置和垂直位置创建对角线渐变效果， 如下例子展示了从左上到右下的渐变效果。从红色渐变为黄色。
代码如下：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(left top, red, yellow);
/* For Safari 5.1 to 6.0 */
-
background:
-o-linear-gradient(bottom right, red, yellow);
/* For Opera 11.1 to 12.0 */
-
background:
-moz-linear-gradient(bottom right, red, yellow);
/* For Firefox 3.6 to 15 */
-
background:
linear-gradient(to bottom right, red, yellow);
/* Standard syntax */
-
}
使用角度
如果你想更好的控制线性渐变的方向，你可以定义角度，而不是使用具体的方向（向下，向上，向左，向右等）
语法如下：
background: linear-gradient(angle, color-stop1, color-stop2);
CSS3代码：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(-90deg, red, yellow);
/* For Safari 5.1 to 6.0 */
-
background:
-o-linear-gradient(-90deg, red, yellow);
/* For Opera 11.1 to 12.0 */
-
background:
-moz-linear-gradient(-90deg, red, yellow);
/* For Firefox 3.6 to 15 */
-
background:
linear-gradient(-90deg, red, yellow);
/* Standard syntax */
-
}
使用多种颜色进行渐变：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(red, yellow, green);
/* For Safari 5.1 to 6.0 */
-
background:
-o-linear-gradient(red, yellow, green);
/* For Opera 11.1 to 12.0 */
-
background:
-moz-linear-gradient(red, yellow, green);
/* For Firefox 3.6 to 15 */
-
background:
linear-gradient(red, yellow, green);
/* Standard syntax */
-
}
如下例子展示了多种颜色从左到右进行渐变
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
/* For Safari 5.1 to 6.0 */
-
background:
-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
-
/* For Opera 11.1 to 12.0 */
-
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
-
/* For Fx 3.6 to 15 */
-
background:
-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
-
/* Standard syntax */
-
background:
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
-
}
使用透明渐变
CSS3渐变支持透明渐变，我们可以使用渐变创建褪色效果。使用rgba()函数可以定义巨头透明度的颜色，rgba()函数的最后一个参数代表透明的，取值范围之0到1之间。0表示完全透明，1表示完全不透明。如下例子展示了从左到右的完全透明到完全不透明的渐变效果。
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-linear-gradient(left,rgba(255,0,0,0),
rgba(255,0,0,1));
/*Safari 5.1-6*/
-
background:
-o-linear-gradient(right,rgba(255,0,0,0),
rgba(255,0,0,1));
/*Opera 11.1-12*/
-
background:
-moz-linear-gradient(right,rgba(255,0,0,0),
rgba(255,0,0,1));
/*Fx 3.6-15*/
-
background:
linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
/*Standard*/
-
}
重复渐变
重复渐变用于创建重复渐变的效果。
重复渐变示例代码如下：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
/* Safari 5.1 to 6.0 */
-
background:
-webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
-
/* Opera 11.1 to 12.0 */
-
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
-
/* Firefox 3.6 to 15 */
-
background:
-moz-repeating-linear-gradient(red, yellow 10%, green 20%);
-
/* Standard syntax */
-
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
-
}
CSS3放射状渐变
语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);
示例如下：
-
#grad {
-
background: red;
/* For browsers that do not support gradients */
-
background:
-webkit-radial-gradient(red, yellow, green);
/* Safari 5.1 to 6.0 */
-
background:
-o-radial-gradient(red, yellow, green);
/* For Opera 11.6 to 12.0 */
-
background:
-moz-radial-gradient(red, yellow, green);
/* For Firefox 3.6 to 15 */
-
background:
radial-gradient(red, yellow, green);
/* Standard syntax */
-
}
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
