IE7,IE8瀏覽器CSS實現正圓角效果代碼

一、關於IE7, IE8不支援CSS3 border-radius

CSS3 border-radius可以輕易實現圓還有圓角效果，然而，需要IE9+瀏覽器才行。移動端自然不成問題，但是眾多（尤其面向C側）PC頁面是至少需要相容IE8的，那有沒有什麼辦法可以讓IE7, IE8也支援圓角呢？

很久很久以前介紹過一個名為PIE的東西可以實現IE7,IE8的圓角，是10年7月份寫的一篇“PIE使IE支援CSS3圓角盒陰影與漸層渲染”（本文還有其他很多圓角方法介紹）。

其原理是利用的IE私人的behavior，本質上還是JS代碼。

這裡，給大家介紹一個使用純CSS實現IE7,IE8瀏覽器正圓角的例子。

二、純CSS實現IE7,IE8圓角

我們直接看demo，您可以狠狠地點擊這裡：IE7/IE8瀏覽器純CSS實現圓角demo

結果，IE7瀏覽器下：

IE8瀏覽器下：

補充於2016-07-13
有小夥伴評論反映IE8下不是正圓，然後，今天我特意開啟10年前還是XP系統的筆記本，使用原生的IE8瀏覽器看了下，除了邊緣糙了點以外，還是正圓，如下截圖：

 

因此，反映IE8圓角不是正圓的小夥伴，可否提供更多的資訊。例如，比方說作業系統，或者是否在IEtester類似軟體中測試的等。

IE11下：

 

IE9瀏覽器下圓角

全相容，效果棒棒噠！

實現原理：
IE9+使用border-radius:50%, IE7,IE8使用border類比。

我們平常使用border-style一般都是solid實線，其他常用的還有dashed以及dotted，我們這裡的主角就是dotted點，在IE瀏覽器下，dotted點是被渲染成正圓的，Chrome瀏覽器則是正方形。

上面demo，如果我們去掉父級的overflow，IE瀏覽器下就會這樣：

同等條件下的Chrome則是方點：

 

於是，我們就可以利用這個圓實現我們想要的圓角效果。我們給一個父級元素，同尺寸，overflow:hidden，只看見左上方那個圓，就可以實現我們想要的正圓效果了。

相關CSS代碼如下：

.box {
    width: 150px; height: 150px;
    position: relative;
    /* 值顯示左上方那個圓點 */
    overflow: hidden;
}
.radius {
    position: absolute;
    width: 100%; height: 100%;
    border: 149px dotted;
    /* IE7,IE8圓尺寸要小1像素同時有1像素位移 */
    margin: 0 0 1px 1px;
    color: #cd0000;
}

是不是很好理解。完整CSS和HTML代碼參見demo。

其他說明

此方法並不適用於IE6瀏覽器，因為IE6瀏覽器下dotted會按照dashed虛線進行渲染，不是個圓。

三、此方法的不足

本文介紹的方法可以輕鬆實現一個圓效果，而且可以無縫全相容。但是，不足在於只能實現個圓，如果你想實現任意大小的圓角效果，怎麼說呢？理論上也是可以實現的，但是，需要很多個元素進行拼接。就是dotted邊框類比小圓角，直線部分需要矩形進行拼接。但是，顯然成本就很高了，在我看來，為了註定要淘汰的IE7，IE8瀏覽器這麼折騰，是不划算的