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

现在css3支持圆角矩形,但是为了兼容性问题,虽然比较麻烦,但还是有必要了解一下以下方法。

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

html代码:

<body>

  <div class="bor">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
</div> <div class="mid">
<p>不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形</p>
</div> <div class="bor">
<div class="b4"></div>
<div class="b3"></div>
<div class="b2"></div>
<div class="b1"></div>
</div> </body>

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:;
padding:0 10px;
font-size: 12px;
line-height: 24px;
white-space: pre-wrap;
}
上一篇:开源布局控件 WeifenLuo.WinFormsUI.Docking.dll使用


下一篇:利用python深度学习算法来绘图