Home > Article > Web Front-end > 不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形_html/css_WEB-ITnose
不使用border-radius，实现一个可复用的高度和宽度都自适应的圆角矩形_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:20:521349browse
现在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;}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动_html/css_WEB-ITnoseNext article：请教关于nth-child的问题_html/css_WEB-ITnose