你的位置:首页 > 网页设计

[网页设计]不使用border


现在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: 0; padding:0 10px; font-size: 12px; line-height: 24px; white-space: pre-wrap;}