CSS 圓角邊框詳解

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More