相容低版本IE瀏覽器的背景顏色漸變效果:大多數的相容性問題都是由於低版本的IE瀏覽器所導致的,本章節分享一段代碼實例,它能夠實現背景的顏色的漸變效果,如果在標準瀏覽器中直接採用css3屬性即可實現,但是IE低版本的問題所以需要進行一下相容性處理。代碼如下:螞蟻部落上面的代碼實現了我們的要求,標準瀏覽...
相容低版本IE瀏覽器的背景顏色漸變效果:
大多數的相容性問題都是由於低版本的IE瀏覽器所導致的,本章節分享一段代碼實例,它能夠實現背景的顏色的漸變效果,如果在標準瀏覽器中直接採用css3屬性即可實現,但是IE低版本的問題所以需要進行一下相容性處理。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .gradient{ background:#000000; background:-moz-linear-gradient(top, #000000 0%, #ffffff 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); background:-webkit-linear-gradient(top, #000000 0%, #ffffff 100%); background:-o-linear-gradient(top, #000000 0%, #ffffff 100%); background:-ms-linear-gradient(top, #000000 0%, #ffffff 100%); background:linear-gradient(to bottom, #000000 0%, #ffffff 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#ffffff',GradientType=0); width:300px; height:100px; margin:0px auto; } :root .gradient{filter:none;} </style> </head> <body> <div class="gradient"></div> </body> </html>
上面的代碼實現了我們的要求,標準瀏覽器使用的linear-gradient屬性,而低版本的IE瀏覽器則是使用的濾鏡效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14244
更多內容可以參閱:http://www.softwhy.com/divcss/