ie7 ie8 使用border模拟圆-优快云博客

本文介绍了一种利用border-style:dotted属性在不同浏览器下实现圆角的技术方案，特别关注IE浏览器中圆点的渲染方式。通过设置特定CSS样式及父元素的overflow属性，确保了兼容性和统一的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
        }