gradient渐变IE兼容处理
生活随笔
收集整理的這篇文章主要介紹了
gradient渐变IE兼容处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
根據caniuse（http://caniuse.com/#search=gradient），gradient兼容性為IE10以及以上瀏覽器。
?
?
實例代碼：
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>gradient 兼容性處理</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent { 14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 font-size: 20px; 18 color: #FF0000; 19 border: 1px solid red; 20 background: #000000; 21 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 22 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); 23 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); 24 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%); 25 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%); 26 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%); 27 } 28 </style> 29 </head> 30 31 <body> 32 <div class="parent"> 33 </div> 34 </body> 35 36 </html>?
chrome瀏覽器效果：
?
IE8瀏覽器效果（無漸變）：
?
gradient兼容性處理： ?
1 .parent { 2 width: 400px; 3 height: 400px; 4 margin: 100px; 5 font-size: 20px; 6 color: #FF0000; 7 border: 1px solid red; 8 background: #000000; 9 background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 10 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); 11 background: -webkit-linear-gradient(top, #000000 0%, #ffffff 100%); 12 background: -o-linear-gradient(top, #000000 0%, #ffffff 100%); 13 background: -ms-linear-gradient(top, #000000 0%, #ffffff 100%); 14 background: linear-gradient(to bottom, #000000 0%, #ffffff 100%); 15 /*關鍵屬性設置*/ 16 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=0); 17 }?
設置filter屬性目的是上一行的透明度不起作用的時候執行，filter: progid:DXImageTransform.Microsoft.gradient是用來做漸變的，GradientType:可讀寫，設置或檢索色彩漸變的方向：
1:默認值。水平漸變。?
0:垂直漸變。
總結：至此完成IE9以及以下IE瀏覽器gradient兼容性處理。
總結
以上是生活随笔為你收集整理的gradient渐变IE兼容处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网站防止SQL注入方法
- 下一篇： webservice linux 杀进程