純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:#d3d3d3\9;

 

注：里面的顏色值必需寫全了，不要縮寫（比如白色可以寫成#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