纯css制作圆角矩形

212 阅读1分钟
<!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>