css3圓角IE的兼容方法

2020-03-24 17:48:57

字體：大中小

來源：轉載

供稿：網友

現在css3的border-radius屬性可以很方便的實現圓角功能，對網站前臺人員無疑是一件喜事，但悲劇的是IE6/7/8并不支持，讓我們棄新技術不用，是不可能的，因此找到了一種解決的辦法--- IE利用VML矢量可標記語言作為畫筆繪出圓角：
下載一個壓縮包ie-css3.htc，里面有一個微軟的腳本文件（11KB）和一個用來測試服務器是否有正確的Content-Type的HTML文件，.htc 文件是IE內核支持Web行為后用來描述此類行為的腳本文件。它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應用到html' target='_blank'>HTML頁面上的任何元素上去。Web 行為是非常偉大的因為它們允許程序員把自定義的功能“連接”到現有的元素和控件，而不是必須讓用戶下載二進制文件（例如ActiveX 控件）來完成這個功能。使用演示：.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:100;
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瀏覽器下這些CSS3效果的實現是要借助于VML，由VML繪制圓角或是投影效果，所以還需要一個z-index屬性。z-index屬性最好設置得比較大，如2。4、如果在IE瀏覽器下某些模塊無法用此渲染，可以試著絕對定位相應的層，即加上“ width: 400px; height:400px;”屬性。5、radius屬性的10px是圓角半徑，還可以給兩個值如“border-radius: 10px 5px;”，這樣則左上角與右下角半徑為10px，右上角與左下角半徑為5px。也可以賦4個值，為“上右下左”。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：帶你入門HTML+CSS網頁設計，編寫網頁代碼的思路

下一篇：實現CSS四種方式和選擇器介紹