關於ie兼容css3圓角與陰影與漸變的渲染
阿新 • • 發佈：2017-07-11
pan 文件 背景 調用 class wid 多圖片 圖片 屬性
我們都知道，ie不兼容一些css3新屬性，這就導致有些瀏覽效果不太好，關於ie的兼容有很多前輩給出了解決方案。這裏我主要講我用到的一個比較好用的方案，即PIE。
這裏的PIE實際上指的是一個名為pie.htc的文件，通過使用css的behavior行為調用這個文件，然後使IE也能實現一些常見的css3效果，例如圓角、陰影、漸變、多圖片背景的渲染等等。
下面就是一個小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .main{ width:300px; height:530px; background: #fff; border:1px solid #efefef; border-radius: 8px; box-shadow: 1px 0 15px #a89b97; margin:40px auto; padding:50px 60px 0 60px; behavior:url(PIE.htc); } </style> </head> <body> <div class="main"></div> </body> </html>
上圖即ie8瀏覽器下的效果，需要註意的是behavior:url(PIE.htc);這行代碼url中需要導入正確的文件地址。
關於ie兼容css3圓角與陰影與漸變的渲染