css背景渐变
幻冰小站 浏览次数:520 2019-09-08 10:24:34

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

CSS3 定义了两种类型的渐变(gradients):

  • 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

  • 径向渐变(Radial Gradients)- 由它们的中心定义

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。

属性




linear-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient10.026.0
10.0 -webkit-
16.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

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


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