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

Web前端知識

首頁 > 免費 > Web前端知識 >

教你如何不使用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í)。

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

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗
  • 有網(wǎng)站建站隊伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗
  • 致力于營銷型網(wǎng)站建設(shè)
  • 始終堅持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰