巧用border属性兼容ie8圆角问题

1.border-radius可以实现css中的圆角样式，但不支持IE8及以下版本2.border属性有三个参数：宽度   、样式、   颜色；3.而其中样式又包括三种： solid（实线）、dotted （点划线）、  dashed（虚线）；4.IE中dotted(点划线)和其他浏览器的不一样，放大了看是圆，现在读到这是不是应该有想法了；5.实例代码：

<style>
.box {
margin-top: 200px;
position:relative;
}
.radius {
width: 100%;
height: 100%;
border: 100px dotted red;
}
.box1 {
width: 120px;
height: 218px;
position: absolute;
left:40px;
top:-100px;
background-color: red;
border:1px
}
.box2 {
width: 200px;
height: 120px;
position: absolute;
left:0;
top:-50px;
background-color: red;
}
</style>

<div class="box">
<i class="radius"></i>
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>

//使用时好像有像素偏移问题；希望各位大牛多多指点；

6.代码比较挫，想法是对的。这是在慕课网视频看的，不知道这种算不算转载。

7.border还有一个double属性，可以用来实现菜单栏三道杠；

.double {width: 120px;height: 20px;border-top: 60px double;border-bottom: 20px solid;}

<p class="double"></p>