我的家園

        讓IE瀏覽器支持CSS3圓角，在IE瀏覽器中實現圓角的效果，一般我們會采用圓角圖片的方式來實現。那我們可以通過CSS3樣式來實現網頁圓角效果嗎？

        下面我們就來介紹一些在IE瀏覽器中通過CSS3實現圓角的方法，如何用CSS3樣式表來實現圓角效果。要注意的是，IE6/7/8這三個IE瀏覽器版本都不支持CSS3的解析，只有在IE9才能支持CSS3和HTML5的標準。讓IE支持CSS3的解析方法有很多，下面介紹一種實用的讓IE支持CSS3解析的方法：IE利用VML矢量可標記語言作為畫筆繪出圓角。

　　下載一個壓縮包，里面有一個微軟的腳本文件和一個用來測試服務器是否有正確的Content-Type的HTML文件：iecss3.rar;.htc文件是IE內核支持Web行為后用來描述此類行為的腳本文件。它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。Web 行為是非常偉大的因為它們允許程序員把自定義的功能“連接”到現有的元素和控件，而不是必須讓用戶下載二進制文件(例如ActiveX 控件)來完成這個功能。

　 下載地址：http://www.rayfile.com/files/ff9b41e8-ab19-11e0-be40-0015c55db73d/

　　解壓后，打開test.html，如果顯示效果是圓角，則可以繼續。

　　使用演示：

.main{

border: 2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此處為ie-css3.htc文件的絕對路徑);

}

　　Webkit內核的瀏覽器支持“-webkit-border-radius: 10px;”屬性(10px是圓角半徑)，可以直接解析出圓角;Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性，也是可以直接解析出圓角;IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。

　　注意：

　　1、behavior的url里一定要填寫ie-css3.htc的絕對路徑，因為 IE瀏覽器找該文件是相對當前html文件路徑來找的，所以對于Wordpress等動態程序生成的頁面一定要填寫絕對路徑。

　　2、一定要有定位屬性：position:relative;

　　3、因為在IE瀏覽器下這些CSS 3效果的實現是要借助于VML，由VML繪制圓角或是投影效果，所以還需要一個z-index屬性。z-index屬性最好設置得比較大，如2。

　　4、如果在IE瀏覽器下某些模塊無法用此渲染，可以試著絕對定位相應的層，即加上“ width: 400px; height:400px;”屬性。

　　5、radius屬性的10px是圓角半徑，還可以給兩個值如“border-radius: 10px 5px;”，這樣則左上角與右下角半徑為10px，右上角與左下角半徑為5px。也可以賦4個值，為“上 右 下 左”。

        這樣不用通過圓角圖片利用CSS3就能在IE瀏覽器中輕松實現圓角的效果。

網站內容由Css3-Html5之家整理編輯，請關注Css3-Html5之家其他更多CSS3教程。

如有疑問，請到Css3-Html5之家留言。Css3-Html5之家，專業的交流學習平臺。