css3 渐变

时间：2011-06-14 来源：jfk1982

css3 渐变分线性渐变和放射性渐变我们用的比较多的是线性渐变分别来看下

css3线性渐变

代码

background:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#333333));//webkit浏览器写法
background:-moz-linear-gradient(-90deg, #ffffff, #333333);//火狐浏览器写法

IE并不支持CSS渐变，但是提供了渐变滤镜，可以实现最简单的渐变效果：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#333333'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#333333')"; /* IE8 */

效果

如果你想多种颜色的话可以这样些代码

background:-webkit-gradient(linear,left top,left bottom,from(#8D9CB0),color-stop(0.20,#B2BECF),color-stop(0.20,#B5C1CF),to(#B5C1CF));
background:-moz-linear-gradient(-90deg, #8D9CB0, #B2BECF 20%, #B5C1CF 20%, #B5C1CF);

效果

意思是从 0%到20%的颜色渐变是#8D9CB0到#B2BECF 从20%到100%颜色渐变是#B5C1CF到#B5C1CF

转载 http://www.htmlcssjs.info/css3/30.html

相关阅读更多 +