CSS3渐变的奥秘

 

渐变

基于CSS的渐变相较于图片的渐变，最大的优点是便于修改，同时支持无级缩放，过渡更加自然！目前，实现CSS渐变的只有基于webkit内核和Gecko内核的浏览器，代表浏览器是Chrome、Safari和Firefox，基于Presto内核的Opera浏览器暂时不支持（升级后的11.10版本添加了对渐变的支持），基于Trident的IE虽然可以通过滤镜的方式实现，但并不提倡！

同时，不同内核实现渐变的语法不同，均为私有属性，目前运用于产品中，还不现实，但就像前言说的，体验一下CSS3的神奇之处，还是很有意思的！

测试基于

• safari 4.03
• chrome 6.0.408.1
• firefox 3.63

注意：CSS代码中还利用了rgba控制颜色的透明度，最后一位即为透明度！

webkit实现语法（Chrome、Safari）

更新：webkit小组宣布，在css3渐变上，将采用Mozilla的语法，但由于以下语法在08年提出，已经较为广泛的使用，所以在新的Webkit引擎中，保留了下列语法，但是建议使用Mozilla语法。

详细语法

-webkit-gradient(type, start_point, end_point, / color-stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / color-stop...)

实例一：线性渐变

//线性渐变
width:100px;
height:100px;
border: 1px solid #666;
background: -webkit-gradient(linear, left top, left bottom , from(#09F), to(#0FF));

实例二：多个径向渐变

//多个径向渐变
width: 100px;
height: 100px;
border: 1px solid #666;
background:
-webkit-gradient(radial, 70 70, 15, 70 90, 40, from(#00c9ff), to(rgba(0, 201, 255, 0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 70 20, 5, 80 24, 20, from(#E9D916), to(rgba(233, 217, 22, 0)), color-stop(80%, #CEC013)),
-webkit-gradient(radial, 10 90, 20, 15 100, 60, from(#F6C), to(rgba(252, 129, 231, 0)), color-stop(90%, #F0C));

效果如下：

 

处理线性渐变，chrome和safari表现一致，但是在多个径向渐变的演示中，safari下的形状边缘有明显锯齿（非图片压缩导致），同时背景呈灰色，chrome没有这些问题！

Gecko实现语法（Firefox）

详细语法

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

实例三：线性渐变

//线性渐变
width:100px;
height:100px;
border: 1px solid #666;
background: -moz-linear-gradient(top, #09F, #0FF);

实例四：径向渐变

//径向渐变 以距离圆形最远的边为参考半径
width: 100px;
height: 150px;
border: 1px solid #666;
background: -moz-radial-gradient(30px 30px 45deg, circle farthest-side, #58ff00 0%, rgba(222, 255, 0, 0) 100%);
//径向渐变 以距离圆形最远的角为参考半径
width: 150px;
height: 100px;
border: 1px solid #666;
background: -moz-radial-gradient(30px 30px 45deg, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 100%);

实例五：径向渐变(椭圆)

width: 500px;
height: 100px;
border: 1px solid #666;
background: -moz-radial-gradient(30px 30px 45deg, ellipse farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 100%);

实例六：多个径向渐变

//多个径向渐变
width: 100px;
height: 100px;
border: 1px solid #666;
background:
-moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%),
-moz-radial-gradient(50px 70px, circle farthest-corner, #F30 0%, rgba(255, 159, 34, 0) 60%),
-moz-radial-gradient(80px 10px, circle farthest-corner, #03F 0%, rgba(222, 255, 0, 0) 80%);

效果如下：

看上去，Gecko内核对渐变有更多的控制，不但可以控制渐变形状，还可以根据盒模型自动设置半径！