<!DOCTYPE html>
<html>
<head>
</head>
<style>
.wrap{
width:10%;
height:180px;
}
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
display: block;
height: 1px;
font-size: 1px;
overflow: hidden;
}
.b1,.b8{
margin: 0 5px;
}
.b2,.b7{
margin:0 3px;
border-left: 2px solid;
border-right:2px solid;
}
.b3,.b6{
margin: 0 2px;
border-left: 1px solid;
border-right:1px solid;
}
.b4,.b5{
margin: 0 1px;
border-left: 1px solid;
border-right:1px solid;
}
.b2,.b3,.b4,.b5,.b6,.b7,.content{border-color:#96C2F1;}
.b1,.b8{background:#96C2F1;}
.content{border-right:1px solid #96C2F1;;border-left:1px solid #96C2F1;overflow:hidden;}
.b2,.b3,.b4,.b5,.b6,.b7,.content{background:#EFF7FF;}
</style>
<body>
<div class="wrap">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<div class="content">
<p>1</p>
</div>
<b class="b5"></b>
<b class="b6"></b>
<b class="b7"></b>
<b class="b8"></b>
</div>
</body>
</html>复制代码纯css制作圆角矩形
最新推荐文章于 2024-02-24 21:40:11 发布
1442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
