您的位置：首页 > 其它

实现圆角矩形边框的方法

2010-09-04 16:30 555 查看

<html>
<head>
<style>
#a{
border-left:1px #B3D580 solid;
border-right:1px #B3D580 solid;
width:700px;
height:100px;
}
.b{
height:1px;
overflow:hidden;
border-left:1px #B3D580 solid;
border-right:1px #B3D580 solid;
}
</style>
</head>
<body>
<div>
<div class="b" style="margin-left:3px;width:694px;background:#B3D580"></div>
<div class="b" style="margin-left:2px;width:696px;"></div>
<div class="b" style="margin-left:1px;width:698px"></div>
<div id="a">

代码很简单，a层为放置内容的层，最外一层要加上background为个属性，目的是要将上、下两线条呈现出来。

这里实现了3像素的圆角边框，b层的数量决定了要实现多少个像素边框。建议不要多于3层，最好是2层，即2像素圆角边框，或者1层，因为层数越多，圆角的表现就越不圆滑。在firefox IE6 都通过测试。

</div>
<div class="b" style="margin-left:1px;width:698px"></div>
<div class="b" style="margin-left:2px;width:696px;"></div>
<div class="b" style="margin-left:3px;width:694px;background:#B3D580"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航