css之border属性实现兼容性圆角
代码展示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>梯形实现圆角(兼容IE7、8)</title>
<style type="text/css">
.trapezoid_top{
width: 204px;
border: 3px solid;
border-color: transparent transparent #0a5c8e transparent;
}
.trapezoid_content{
width: 210px;height: 40px;
background-color: #0a5c8e;
font-size: 20px;
line-height: 40px;
text-align: center;
color: #fff;
}
.trapezoid_bottom{
width: 204px;
border: 3px solid;
border-color: #0a5c8e transparent transparent transparent;
}
</style>
</head>
<body>
<div>
<div class="trapezoid_top">
</div>
<div class="trapezoid_content">
提 交
</div>
<div class="trapezoid_bottom">
</div>
</div>
</body>
</html>