众所周知，IE7，8不支持border-radius效果。但我们同样有办法用css实现这个效果，方法就是用border来模拟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
position: relative;
width: 150px;
height: 150px;
line-height: 150px;
overflow: hidden;
}
.radius{
position: absolute;
width: 100%;
height: 100%;
margin: 0 0 1px 1px;
/*现代浏览器就使用border-radius*/
border-radius: 50%;
/*IE7,8就使用border来模拟*/
border: 149px dotted;
border-width: 0vw;
margin: 0vw;
color: #cd0000;
background-color: currentColor;
}
.text{
position: relative;
text-align: center;
color: #fff;
font-size: 24px;
margin: 0;
}
</style>
</head>
<body>
<div>
<p class="radius"></p>
<p class="text">kobe</p>
</div>
</body>
</html>
vw单位可能大家用的比较少，因为这个单位是IE9+才支持，所以现代浏览器直接把边框设为0vw，就表示无边框，直接使用border-radius，而IE7,8则使用border来模拟。
具体可查看这里
时间： 2024-08-08 01:59:10