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

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

來源：北京匯仁智杰科技有限公司　　　時(shí)間：2016-04-15　　　點(diǎn)擊：次

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

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

97人妻免费视频,欧美日韩一区二区三区四区五区,国产老熟女一区91,国产精品美女高潮呻吟

Web前端知識(shí)

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

推薦文章

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

推薦文章

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

匯仁智杰與眾不同

公司動(dòng)態(tài)

97人妻免费视频,欧美日韩一区二区三区四区五区,国产老熟女一区91,国产精品美女高潮呻吟

Web前端知識(shí)

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

推薦文章

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

推薦文章

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

匯仁智杰與眾不同

公司動(dòng)態(tài)

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

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