ie7 ie8 使用border模拟圆

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+的浏览器都支持

巴特西

ie7 ie8 使用border模拟圆

最新文章

热门文章