建站
咨詢
售后
建站咨詢
新聞中心
如果要想在IE瀏覽器中實(shí)現(xiàn)圓角的效果，我們一般都會(huì)采用圓角圖片的方式。用圖片的話，基本就跟瀏覽器沒(méi)有多大關(guān)系了，因?yàn)槿魏螢g覽器都支持這種方式。
推薦專題： Web標(biāo)準(zhǔn)化——跨瀏覽器開(kāi)發(fā)教程本文我們主要是講解如果用CSS 3樣式表來(lái)實(shí)現(xiàn)圓角效果，值得注意的是，IE6/7/8這三個(gè)IE瀏覽器版本都不支持CSS 3的解析，只有還不太主流的IE 9支持CSS 3和HTML 5的標(biāo)準(zhǔn)。讓IE支持CSS 3的解析方法有很多種，下面介紹一種實(shí)用的讓IE支持CSS 3解析的方法——IE利用VML矢量可標(biāo)記語(yǔ)言作為畫筆繪出圓角：
1、下載一個(gè)壓縮包，里面有一個(gè)微軟的腳本文件（11KB）和一個(gè)用來(lái)測(cè)試服務(wù)器是否有正確的Content-Type的HTML文件：iecss3.rar；.htc文件是IE內(nèi)核支持Web行為后用來(lái)描述此類行為的腳本文件。它們定義了一套方法和屬性，程序員幾乎可以把這些方法和屬性應(yīng)用到HTML頁(yè)面上的任何元素上去。Web 行為是非常偉大的因?yàn)樗鼈冊(cè)试S程序員把自定義的功能“連接”到現(xiàn)有的元素和控件，而不是必須讓用戶下載二進(jìn)制文件（例如ActiveX 控件）來(lái)完成這個(gè)功能。
下載地址：http://www.iefans.net/wp-content/uploads/2010/12/iecss3.rar
解壓后，打開(kāi)test.html，如果顯示效果是圓角，則可以繼續(xù)。
使用演示：
.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文件的絕對(duì)路徑);
}
Webkit內(nèi)核的瀏覽器支持“-webkit-border-radius: 10px;”屬性（10px是圓角半徑），可以直接解析出圓角；Firefox瀏覽器支持“-moz-border-radius: 10px;”屬性，也是可以直接解析出圓角；IE系瀏覽器則需要加上“border-radius: 15px;”的屬性。
注意：
1、behavior的url里一定要填寫ie-css3.htc的絕對(duì)路徑，因?yàn)?IE瀏覽器找該文件是相對(duì)當(dāng)前html文件路徑來(lái)找的，所以對(duì)于Wordpress等動(dòng)態(tài)程序生成的頁(yè)面一定要填寫絕對(duì)路徑。
2、一定要有定位屬性：position:relative;
3、因?yàn)樵贗E瀏覽器下這些CSS 3效果的實(shí)現(xiàn)是要借助于VML，由VML繪制圓角或是投影效果，所以還需要一個(gè)z-index屬性。z-index屬性最好設(shè)置得比較大，如2。
4、如果在IE瀏覽器下某些模塊無(wú)法用此渲染，可以試著絕對(duì)定位相應(yīng)的層，即加上“ width: 400px; height:400px;”屬性。
5、radius屬性的10px是圓角半徑，還可以給兩個(gè)值如“border-radius: 10px 5px;”，這樣則左上角與右下角半徑為10px，右上角與左下角半徑為5px。也可以賦4個(gè)值，為“上 右 下 左”。
【責(zé)任編輯：王曉東 TEL：（010）68476606】
分享文章：讓IE支持CSS3圓角屬性的方法
網(wǎng)站URL：http://www.5511xx.com/article/coogjoc.html
