#bg{
background-color: #42c264;
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);
}
linear-gradient
属性会指示浏览器从第一个颜色值(即例子中的#4fec50)开始,
渐变至第二个颜色值(#42c264)。
你可能注意到了,CSS
代码中的background-image:linear-gradient
属性使用不同
前缀(例如-webkit-)重复了多次。这种写法允许不同的浏览器(包括-moz-代表的
Mozilla
Firefox,-ms-代表的Microsoft Internet Explorer 等)厂商在发布正式版本之前之
前,试验各自对CSS3
新特性的实现,正式版本发布后就不再需要前缀。遵循样式表的层
叠特性,我们将无前缀的代码放在最后,这样如果该特性可用,则会覆盖之前的声明。