免費學(xué)習(xí)課堂

教你如何不使用border-radius，就能實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形

來源：北京匯仁智杰科技有限公司　　　時間：2016-04-15　　　點擊：次

　　在我們寫樣式的時候經(jīng)常遇到這個樣式這樣，下一個有相同的樣式的時候，不能同時控制的情況，這樣的情況經(jīng)常出現(xiàn)，那么今天匯仁智杰小編就教你如何不使用border-radius，就能實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形。
　　現(xiàn)在css3支持圓角矩形，但是為了兼容性問題，雖然比較麻煩，但還是有必要了解一下以下方法。
　　在一個div內(nèi)，包含8個div，控制這個8個div的height、margin以及border屬性值，以達(dá)到圓角矩形效果,不過要注意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的情況下實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形</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;
}
　　以上就是匯仁智杰分享的幾種方法，希望對您有所幫助，每天都會有內(nèi)容更新，請及時關(guān)注我們哦，如果說您有什么不同的見解，請隨時聯(lián)系小編，我們一起探討學(xué)習(xí)。

上一個：如何用css實現(xiàn)一個左側(cè)定寬，右側(cè)自適應(yīng)兩列布局
下一個：為什么a標(biāo)簽中使用img后的高度多了幾個像素？

国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識

免費學(xué)習(xí)課堂

推薦文章

教你如何不使用border-radius，就能實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形

推薦文章

網(wǎng)絡(luò)營銷推廣?。”本﹨R仁智杰科技有限公司！

匯仁智杰與眾不同

公司動態(tài)

国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識

免費學(xué)習(xí)課堂

推薦文章

教你如何不使用border-radius，就能實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形

推薦文章

網(wǎng)絡(luò)營銷推廣?。”本﹨R仁智杰科技有限公司！

匯仁智杰與眾不同

公司動態(tài)

教你如何不使用border-radius，就能實現(xiàn)一個可復(fù)用的高度和寬度都自適應(yīng)的圓角矩形

網(wǎng)絡(luò)營銷推廣?。”本﹨R仁智杰科技有限公司！