你的分享就是我们的动力 ---﹥

webkit对于CSS3渐变样式语法的更新

时间:2011-09-23 11:01来源:www.chengxuyuans.com 点击:

近日webkit在其博客中介绍了渐变的新写法,新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。

让我们直接看一下具体的代码如何:

   
.selector{
background:-moz-linear-gradient(left, white, black);/*gradient for firefox*/
background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/*the old grandient for webkit*/
}

当然,放射渐变也同样做了优化:


.selector{
background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/
background:-webkit-radial-gradient(10% 30%, white, black);/*new gradient for webkit */
background:-webkit-gradient(radial, 0 10%, 0 30%, from(#white), to(#black));/*the old grandient for webkit*/
}

嗯,webkit和firefox终于可以用同样的渐变语法了,当然,什么时候他们都能够去掉私有前缀最好——最好的时期是IE9也能完美支持渐变 T_T

需要注意的是,新的渐变语法只被部署到了nightly build版本的webkit上,safari和chrome都尚未真正实现,但是估计不远了吧

转载注明地址:http://www.chengxuyuans.com/css3/16788.html