900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 不使用border-radius 实现一个可复用的高度和宽度都自适应的圆角矩形

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

时间:2022-08-20 00:50:41

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。