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(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都尚未真正实现，但是估计不远了吧～

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索background
， webkit
， 语法
， gradient
， black
， webkit 
， 写法
线性渐变
，以便于您获取更多的相关知识。