标签：html 渲染 css pos 浏览器 com over idt ie6
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+的浏览器都支持
标签：html 渲染 css pos 浏览器 com over idt ie6
原文地址：http://www.cnblogs.com/xiaofenguo/p/6137011.html
