純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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章