讓IE支援CSS3圓角的方法

來源:互聯網
上載者:User
關鍵字 網頁製作 CSS教程

如果要想在IE瀏覽器中實現圓角的效果,我們一般都會採用圓角圖片的方式。 用圖片的話,基本就跟瀏覽器沒有多大關系了,因為任何瀏覽器都支援這種方式。

本文我們主要是講解如果用CSS 3樣式表來實現圓角效果,值得注意的是,IE6/7/8這三個IE瀏覽器版本都不支援CSS 3的解析,只有還不太主流的IE 9支援CSS 3和HTML 5的標準。 讓IE支援CSS 3的解析方法有很多種,下面介紹一種實用的讓IE支援CSS 3解析的方法——IE利用VML向量可標記語言作為畫筆繪出圓角:

1、下載一個壓縮包,裡面有一個微軟的指令檔(11KB)和一個用來測試伺服器是否有正確的Content-Type的HTML檔:iecss3.rar;. htc檔是IE內核支援Web行為後用來描述此類行為的指令檔。 它們定義了一套方法和屬性,程式師幾乎可以把這些方法和屬性應用到HTML頁面上的任何元素上去。 Web 行為是非常偉大的因為它們允許程式師把自訂的功能「連接」到現有的元素和控制項,而不是必須讓使用者下載二進位檔案(例如ActiveX 控制項)來完成這個功能。

下載位址:HTTP://www.iefans.net/wp-content/uploads/2010/12/iecss3.rar

解壓後,打開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個值,為「上 右 下 左」。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.