详解CSS 3 渐变属性

详解CSS 3 渐变属性

2011年9月27日 | 202 views>>>坐电梯，写评论

CSS 3中的渐变属性的支持度具体是：IE10、FF3.6+、Safari4.0+、Chrome、Opera11.1+、iOS3.2+、Opera Mobile11.1、Android，也就是说除了IE10以外其它的浏览器已经支持 CSS3 的渐变属性了（虽然有些还在使用私有属性）。【Opera暂不支持径向渐变】

1、线性渐变（从顶到底）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}

第一个参数是指从上开始，后面没有方位参数自然就是下啦。blue，red为颜色值，即从上到下，由蓝色到红色渐变。当然我们也可以让它变成从水平线性。

2、线性渐变（从左到右）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}

3、线性渐变（加入stop() 函数）

div{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
 #1a82f7 85%, red);/* Safari, Chrome*/

background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/

background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}

上面代码的意思指：从左到15%处，再到50%处，再到85%处，再到右边，颜色依次为从blue到#1a82f7， #2F2727, #1a82f7再到red，依次渐变显示。当然中间的50%是可以省略的，不过不建议省略，直接用上百分比位置，看起来也比较清楚。

总结一下：线性渐变前面第一个参数如left，即意思为从left——right渐变，如果为top，即意思为从top——bottom渐变。如果参数为“top left”，即意思从top left—— bottom right渐变。

第二个参数为渐变开始的第一个颜色，依次为其它渐变色，最后一个颜色即为最后的渐变色。那中间的渐变色，还有另一个位置参数，如 #1a82f7 15%即为从上一个颜色处到15%处，依次渐变为 #1a82f7。

那肯定有人会问了，如果我中间的渐变色不加位置参数呢？那也简单，位置均分渐变，即(left, blue, #1a82f7 , #2F2727 , #1a82f7 , red) == (left, blue, #1a82f7 25%, #2F2727 50%, #1a82f7 75%, red)。

4、径向渐变（从圆心到外面）

div{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}

径向渐变，从圆心向处围渐变，颜色从blue渐变为red。当然，如果参数circle替换为ellipse,则为椭圆形的径向渐变。

5、径向渐变（任意）

关于径向渐变（任意）情况比较复杂，具体需要参考CSS 3手册。

<radial-gradient>：radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

关于具体取值请参考这里：http://css.doyoe.com/values/radial-gradient().htm

在线生成渐变效果工具 Update（09-39）

Ultimate CSS Gradient Generator 是一款在线生成CSS 渐变效果的工具，不过只支持线性渐变。整个操作就像是Photoshop 的调色，不过在右边可以即时生成兼容所有浏览器的CSS 代码。

地址：http://www.colorzilla.com/gradient-editor/