在網(wǎng)上查閱了一些博主的技術(shù)分享碑定,想在這里做一個summary,方便后期查閱記憶
參考來源:
https://blog.csdn.net/sinat_33915360/article/details/86504970
https://www.zhangxinxu.com/study/201007/pie-ie-css3-demo.html (技術(shù)總結(jié)--大佬這里還有很多c3的兼容處理漫试!贊!)
PIE.htc下載地址:http://css3pie.com/download/
圖片.png
border-radius
box-shadow屬性的使用同理
引入PIE.htc可以解決ie低端瀏覽器不能設(shè)置圓角邊框的特效。
使用方法很簡單普泡,只要在你想要設(shè)置圓角的那個對象那里加入下面三行代碼:
且注意PIE.htc的路徑是針對于html文檔來說的,而不是從css開始出發(fā)寫路徑歧匈,即下面的demo工程截圖為
圖片.png
所以在css那邊寫的引用PIE.htc是 behavior: url(PIE.htc);而非 behavior: url(../PIE.htc);
position: relative;
z-index: 2;
behavior: url(PIE.htc);
下面是一個小demo
c3圓角的ie8兼容.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<input type="text" class="search">
</body>
</html>
index.css
.search {
position: relative;
z-index: 2;
width: 150px;
height: 50px;
border:0;
background: lightskyblue;
border-radius: 10px;
behavior: url(PIE.htc);
}
背景顏色透明
position: relative;
z-index: 2;
behavior: url(PIE.htc);
background: rgba(0, 0, 0, 0.55);
-pie-background: rgba(0, 0, 0, 0.55);