webkit博客:CSS3线性突变样式语法
日期：2013-12-13 浏览次数：21144 次
网页制造aiyiweb文章简介：webkit对于CSS3渐变款式语法的更新.
之前，我在前端观察发表了一篇《理解CSS3线性渐变》，置信很多同学都有研讨过CSS3的渐变，大部分人都会感到纠结吧，webkit和firefox的语法有很大的不同啊。理想上，对比W3C规范，可以发现Firefox的语法更规范一些。如今好音讯来了，Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。
具体哪种写法更优秀就不讨论了，近日webkit在其博客中引见了渐变的新写法，新写法采用了W3C和Firefox所用的语法，即，将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。
让我们直接看一下具体的代码如何：
1 2 3 4 5 |
.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*/ } |
当然，放射渐变也同样做了优化：
1 2 3 4 5 |
.selector{ background:-moz-radial-gradient(10% 30%, white, black);/*gradient for firefox*/ background:-webkit-radial-gradient( |
