纯CSS实现的大小渐变效果

纯CSS实现的大小渐变效果

兄弟姐妹们，现在做一个渐近再也不用使用图片。用css就能写出来。并且还兼容IE7以上、火狐、谷歌等主流浏览器。

正确写法：

background:-webkit-gradient(linear, left top, left bottom, from(#d3d3d3),to(#9d9d9d) );

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#9d9d9d' );
background:linear-gradient(to bottom, #d3d3d3, #9d9d9d);
background:#d3d3d39;

注：里面的颜色值必需写全了，不要缩写（比如白色可以写成#fff，不要这样写，要写成#ffffff），否则IE7会有问题

错误写法：有些小伙伴会将渐近色的css写成这样的

background:-webkit-gradient(linear, left top, left bottom, from(#bc7639),to(#b47035) );

background:-moz-linear-gradient(center top , #bc7639, #b47035) repeat scroll 0 0 transparent;

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc7639',endColorstr='#b47035' );

这种写法IE9以上的浏览器不支持，会直接不显示，成白色。

---

来源：https://www.iwmyx.cn/ccsssxddxjbx.html