【HTML+CSS】不使用border-radius实现可复用的圆角矩形

写在前面

最近在跟着GitHub上百度前端学院的task练习前端，task1中的任务六要求不用border-radius实现一个可复用的高度和宽度自适应的圆角矩形。查了一些资料之后自己动手从头实现了一遍，用这篇博客记录这次练习。

参考文章

纯CSS圆角框

高度和宽度自适应的矩形

题目的第一个要求是该圆角矩形的高度和宽度要自适应。
css样式中将width和height属性值设为auto即可实现。

可复用的圆角矩形

整体思路：
圆角框可以由一个个容器堆砌而成，每个容器的宽度不同，宽度由外边距margin来实现，由上到下的宽度依次递减。

HTML中用两层div实现，最外面一层div配合另外八个div实现边框，里面的一层div放内容。

HTML结构如下：

    <div class="shape">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
        <div class="b4"></div>
        <div class="shapeContent">
           <p>圆角矩形</p>
           <p>高度和宽度自适应</p> 
        </div>
        <div class="b5"></div>
        <div class="b6"></div>
        <div class="b7"></div>
        <div class="b8"></div>  
    </div>

b1-b4构成上面左右两个圆角结构，b5-b8构成了下面左右两个圆角结构。
shapeContent用来放置矩形的内容，将八个设置圆角结构的div和内容div放在最外层的div中，并将最外层div命名为shape，用来设置通用的样式。这样的结构便于之后代码的复用。

如图示，圆角矩形左右两边的竖线样式由shapeContent，即放置内容主体的div实现，上下两条竖线样式则由b1和b8实现，构成圆角的矩形实际上由b2 b3 b4 b5 b6 b7六个div以不同宽度依次排列而成。

首先将b1-b8都设置成块状，超出部分隐藏，高度均为1px。
CSS代码如下：

.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{
display: block;
overflow: hidden;
height: 1px;
}

接下来设置b1和b8，实现上下两条竖线：

.b1,.b8{
//左右两侧的外边距为5px
margin: 0 5px;
//设置线条颜色
background: black;
}

然后依次设置b2-b7的样式，来实现四个角的圆角效果。其中b2和b7效果相同，b3和b6效果相同，b4和b5效果相同。

.b2,.b7{
margin: 0 3px;
border-right: 2px solid;
border-left: 2px solid;
}
.b3,.b6{
margin: 0 2px;
border-right: 1px solid;
border-left: 1px solid;
}
.b4,.b5{
margin: 0 1px;
border-right: 1px solid;
border-left: 1px solid;
height: 2px;
}

由上述CSS代码可以看出，b2-b7均设置了border-left和border-right的宽度和样式，border的宽度依次递减实现了矩形的大小依次递减，用margin来设置左右边距以保证矩形能够依次排列。
由于不设置b2-b7的背景颜色，故而这六个div的内容不显示，从而实现圆角结构。（动手修改b2-b7部分的代码的background属性即可理解实现的思路，例如增加一行background: yellow;）

小结

利用HTML元素的特点，通过设置其样式来实现圆角结构。该代码还可以通过增加一个color类来实现边框颜色的修改，参考文章里面有详细的说明和源码，这里不再进行说明。这个task虽然简单，但动手跟着做一遍再进行整理，有助于加深对css各个属性的了解与认识。