CSS 圓角邊框詳解

來源:互聯網
上載者:User
 
 概要:
 看到許多網站的邊框許多是圓角的,很漂亮,可是我作圖本領不行,所以想想能不能用css實現呢?經過一番搜尋,有了發現.主要原理大概是線條的重疊.下面做一番分析,如果有不妥,希望各位能糾正,在此先謝過了.

  1.   CSS代碼:
 1 <HTML>
 2 <HEAD>
 3 <style>
 4 .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
 5 .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
 6 .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
 7 .b1,.b1b{margin:0 5px;background:#999;}
 8 .b2,.b2b{margin:0 3px;border-width:2px;}
 9 .b3,.b3b{margin:0 2px;}
10 .b4,.b4b{height:2px;margin:0 1px;}
11 .d1{background:#F7F8F9;}
12 </style>
13 </head>
14 <body>
15 <div style="width:771px">
16 <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
17 <div class="b d1">
18 <font style="font-size:26px;color:red; margin:0px 10px;">簡潔型css圓角矩形</font>
19 </div>
20 <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
21 </div>
22 </body>
23 </html>

   2.   CSS樣式分析
      從4-11行是定義的CSS樣式.可以看出有b1-b4表示邊框上邊框, b1b-b4b表示邊框下邊框,b表示中間部分,
   
      
    1):線條順序:
    如果要實現如上所示的圓角.上面需要四跟線條b1,b2,b3,b4,下面需要四根線條,b1b,b2b,b3b,b4b
    因為互相的銜接,因此採用block現實方式,因為block的方式會為對象添加新行,保持他們的層次.
    所以上邊框的順序是b1,b2,b3,b4,下邊框的順序b4b,b3b,b2b,b1b
    2):各個線條寬度,高度
    如果設整個邊框寬度為1,圓角寬度為5
    b1則左右邊距為5
    b2左右邊距3,則寬度為2
    b3左右邊距2,寬度為1
    b4左右邊距1,寬度5-2-1-1=1,高度5-1-1-1=2
    3):代碼詳解
    .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
     所有線條現實都是以block方式現實,即:塊對象的預設值。將對象強製作為塊對象呈遞,為對象之後添     加新行

    .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
     高度都是1像素,其中b4,b4b是2px;
    .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
     除了b1,b1b左右邊都是1px;
    .b1,.b1b{margin:0 5px;background:#999;}
     b1,b1b上下邊距0 ,左右邊距5
    .b2,.b2b{margin:0 3px;border-width:2px;}
     b2,b2b 上下邊距0,左右邊距3,邊的寬度為2,因此剛好接上b1
    .b3,.b3b{margin:0 2px;}
     b3,b3b 上下邊距0,左右邊距2 邊的寬度為1
    .b4,.b4b{height:2px;margin:0 1px;}
     b4,b4b 高度為2,上下邊距0 左右邊距1
    .d1{background:#F7F8F9;}
    4):資料結構
     <div style="width:771px">
     <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
     <div class="b d1">
     <font style="font-size:26px;color:red; margin:0px 10px;">簡潔型css圓角矩形</font>
     </div>
     <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
     </div>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.