ie7 ie8 使用border模拟圆

Posted 2020-08-22 半夏微澜ぺ

border-radius 属性ie8+才支持，ie7 ie8 下的圆角就可以使用border进行模拟；（移动端都支持）

我们平常使用border-style一般都是solid实线，其他常用的还有dashed以及dotted，我们这里的主角就是dotted点，在IE浏览器下，dotted点是被渲染成正圆的，Chrome浏览器则是正方形。（ie6 下border-style：dotted显示的效果与dashed的效果是一样的）

其实我们就使用border-style：dotted的一个圆点，不然会有很多的圆点，以及谷歌下渲染dotted的正方形，所以父元素要设置overflow：hidden

css

.circle {
            position: relative;
            width: 50px;
            height: 50px;
            margin: 100px auto;
            overflow: hidden;
        }
        .circle div{
            position: absolute;
            width:100%;
            height:100%;
            color: red;
            /*使用css hack currentColor只有ie8+的浏览器才支持 谷歌 火狐都支持*/
            background-color: currentColor;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 50px dotted red;
            /*使用css hack vw只有ie8+的浏览器才支持 谷歌 火狐都支持*/
            border-width: 0vw;
        }

 

html

<div class="circle"><div></div></div>

 

效果：

在ie6+的浏览器都支持