在我們寫樣式的時候經常遇到這個樣式這樣，下一個有相同的樣式的時候，不能同時控制的情況，這樣的情況經常出現，那么今天匯仁智杰小編就教你如何不使用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
