实现圆角矩形边框的方法

最新推荐文章于 2023-04-30 23:28:59 发布

xyl36500

最新推荐文章于 2023-04-30 23:28:59 发布

阅读量1.1k

点赞数

分类专栏： div+css 文章标签： class firefox 测试 ie

本文链接：https://blog.csdn.net/xyl36500/article/details/5863419

版权

div+css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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>

xyl36500

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现圆角矩形边框的方法

<br /><html><br /><head><br /><style><br />#a{<br />border-left:1px #B3D580 solid;<br />border-right:1px #B3D580 solid;<br />width:700px;<br />height:100px;<br />}<br />.b{<br />height:1px;<br />overflow:hidden;<br />border-left:1px #B3D580 solid;<br />bor
复制链接

扫一扫

专栏目录