不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形-jimmie.Mr

在一个div内，包含8个div，控制这个8个div的height、margin以及border属性值，以达到圆角矩形效果,不过要注意div的顺序。

html代码：

 

 

 

 

 

 

 

 
不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形
 

 

 

 

 

 

 

css代码：

.bor div { height: 1px; }

 .b1 {
 margin: 0 3px;
 background-color: black;
 }

 .b2,
 .b3,
 .b4,
 .mid {
 border-left: 1px solid black;
 border-right: 1px solid black;
 }

 .b2 {
 margin: 0 2px;
 }

 .b3 {
 margin: 0 1px;
 }

 .b4 {
 margin: 0 1px;
 }

.mid p {
 margin: 0;
 padding:0 10px;
 font-size: 12px;
 line-height: 24px;
 white-space: pre-wrap;
}