纯CSS实现圆角边框

最新推荐文章于 2022-01-30 20:39:37 发布

前端老码农

最新推荐文章于 2022-01-30 20:39:37 发布

阅读量242

点赞数

分类专栏：前端文章标签： CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=jjbhk1kcb&title=%E7%BA%AFCSS%E5%AE%9E%E7%8E%B0%E5%9C%86%E8%A7%92%E8%BE%B9%E6%A1%86

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

HTML部分：
<body>
<div> <b class=”t1″></b>
    <b class=”t2″></b>
    <b class=”t3″></b>
    <b class=”t4″></b>
    <div class=”cont”>这边输入实际内容</div>
    <b class=”b4″></b>
    <b class=”b3″></b>
    <b class=”b2″></b>
    <b class=”b1″></b>
</div>
</body>

CSS代码：
<style type=”text/css”>
.t1,.t2,.t3,.t4,.b1,.b2,.b3,.b4{overflow:hidden; display:block;}
.t1,.t2,.t3,.b1,.b2,.b3{height:1px;}
.t2,.t3,.t4,.b2,.b3,.b4,.cont{border-left:1px solid #666666; border-right:1px solid #666666;}
.t1,.b1{margin:0 5px; background-color:#666666;}
.t2,.b2{margin:0 3px; border-width:2px;}
.t3,.b3{margin:0 2px;}
.t4,.b4{margin:0 1px; height:2px;}
.cont{height:20px;}
</style>