IE兼容CSS3圓角border-radius的方法（同時兼容box-shadow，text-shadow）

IE兼容CSS3圓角border-radius，box-shadow，text-shadow的方法

1.下載ie-css3.htc

 

2.CSS

box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari 和 Chrome */
  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

  behavior: url(ie-css3.htc); /* 通知IE瀏覽器調用腳本做用於'box'類 */
}

 

3.問題：

1、只能同時4角圓角，不能單獨設置；

2、div上能夠正常使用，測試text文本框，會出現異常；

3、CSS文件要和頁面在同一目錄下，不然無效

4、當前元素必定要有定位屬性，像是position:relative或是position:absolute屬性。

5、z-index值必定要比周圍元素的要高，不然……只能說抱歉了~~

 

4.支持的樣式及狀態說明

參見下表：

樣式	生效	無效
border-radius	爲元素四個角設置圓角屬性 元素邊框	只設置一個角落的圓角屬性
box-shadow	模糊大小參數 偏移值	不支持除了黑色(#000)之外的其餘顏色
text-shadow	模糊大小參數 偏移值 顏色值	IE下的表現與Firefox/Safari/Chrome有一點點的差別，緣由不詳