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.border还有一个double属性,可以用来实现菜单栏三道杠;
.double {
width: 120px;
height: 20px;
border-top: 60px double;
border-bottom: 20px solid;
}
<p class=”double”></p>
欢迎分享本文,转载请保留出处:前端ABC » 巧用border属性兼容ie8圆角问题