因为ie9-不知道border-radius属性,所以在ie7、8下要想实现圆角很多都是引用的老办法用一张带圆角的图片作为背景。
现在找到一个纯css并且在ie7、8下也能实现圆角功能的方法,特此记录一下。
CSS代码
.div{
width:100px;height:100px;line-height:100px;
position:relative;overflow:hidden;
}
.radius{
position:absolute;width:100%;height:100%;
border-radius:50%;/*主流浏览器支持的属性*/
border;99px dotted;
/*ie7、8园的尺寸要小1px,同时会出现1px的偏移,所以设置为99px*/
margin:0 0 1px 1px;
border-width:0vw;/*vw 可是窗口的宽度单位;*/
margin:0vw;
color:green;
background-color:currentColor;
}
.text{
position:relative;
color:#fff;
text-align;center;
font-size;24px;
}
HTML 代码:
<div class="div">
<i class = "radius"></i>
<p class="text">美女</p>
</div>