技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> webkit对于CSS3渐变样式语法的更新

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

浏览:1697次  出处信息

之前,我在前端观察发表了一篇《理解CSS3线性渐变》,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊。事实上,对比W3C规范,可以发现Firefox的语法更规范一些。现在好消息来了,Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。

具体哪种写法更优秀就不讨论了,近日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都尚未真正实现,但是估计不远了吧~~

建议继续学习:

  1. 理解CSS3线性渐变    (阅读:2296)
  2. 渐变背景上的内容垂直居中    (阅读:2264)
  3. CSS3 文字渐变    (阅读:1929)
  4. Query Forwarding in Geographically Distributed Search Engines    (阅读:1875)
  5. CSS Gradient详解    (阅读:1399)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1