纯CSS实现圆角边框
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>
總結
以上是生活随笔為你收集整理的纯CSS实现圆角边框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UI设计师必知：link和@import
- 下一篇： css未知尺寸的图片的水平和垂直居中