在我们写样式的时候经常遇到这个样式这样，下一个有相同的样式的时候，不能同时控制的情况，这样的情况经常出现，那么今天汇仁智杰小编就教你如何不使用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;
}
以上就是汇仁智杰分享的几种方法，希望对您有所帮助，每天都会有内容更新，请及时关注我们哦，如果说您有什么不同的见解，请随时联系小编，我们一起探讨学习。
免费学习课堂
推荐文章
教你如何不使用border-radius，就能实现一个可复用的高度和宽度都自适应的圆角矩形
来源：北京汇仁智杰科技有限公司 时间：2016-04-15 点击： 次
推荐文章
- 织梦dedecms漏洞修复大全含任意文件2016-09-05
- 整顿微信公众号过度营销 对严重违2016-01-26
- SEO优化过程要避免什么？2016-01-26
- 网站空间被挂马的原因原因及解决2016-01-26
- 2016企业该如何运用互联网进行营销2016-01-26
- WEB前端项目开发中需注意的细节2016-01-26
- 低价网站建设的危害有哪些？2016-01-15
- 如何详细的分析你网站的竞争对手2015-06-10
- 网站设计中四个常犯的错误2015-01-22
- 如何搭配网站设计中的色彩？2015-01-22
