CSS3總結一：border（邊框）

• Border-CSS1的屬性

• Border-CSS1：border
• Border-CSS1：border-style
• Border-CSS1：border-width
• Border-CSS1：border-color

• Border-CSS3的屬性

• Border-CSS3：border-radius
• Border-CSS3：box-shadow
• Border-CSS3：border-image、-image-source、-image-slice、-image-width、-image-outset、-image-repeat

 一、Border-CSS1的屬性

在CSS1中就定義了邊框樣式屬性：border設置全部或指定具體邊框樣式。具體包括指定樣式：寬度：width、樣式：style（none、heidden、solid、groove等）、顏色：color。可以通過border統一設置邊框樣式，也可以通過border-left:width style color獨立設置邊框樣式。這部分相對比較簡單，使用四個div示例及樣式展示一下基本設置方法：

solid

dotted

bouble

border-bottom

 

.solid{border:1px solid #ee9900;}
.dotted{border:1px botted #993366;}
.bouble{border:3px boudle #000;}/*注意雙實線實質上是將邊框寬度分成約等於的三等份，取整值，比如如果設置寬度為2px，兩條邊框各取1px，就沒有空隙了*/
.borderBottom{border-bottom:3px solid red;}

 二、Border-CSS3的屬性

 2.1-邊框半徑（圓角邊框）：border-radius

 

邊框半徑border-radius是CSS3的一個邊框屬性，也是兼容性不錯的一個屬性，先來看看基本及幾個使用示例：

radius1

radius2

radius3

 

.radius1{border-radius:10px;}
.radius2{border-radius:10px 15px 20px 25px;}
//radius3第一種寫法
.radius3{border-radius:10px 20px;}
//radius3第二種寫法
.radius3{border-top-left-radius:10px;border-top-right-radius:20px;border-bottom-right-radius:10px;border-bottom-left:20px;}

 上面三個是非常簡單的border-radius應用，就不過多的解釋了，接着來看下面這幾個特殊的示例：

radius4

radius5

radius6

radius7

radius8

radius9

radius10

radius11

radius12

 

 到這里是不是眼花繚亂了，如果沒有眼花繚亂的大神請繞路啦，下面是實現每個形狀的css代碼：

//沒有設置寬高的都默認為100*100
.radius4{border-top-left-radius:100%;}
.radius5{border-top-left-radius:50px 50px;border-top-raight:50px 50px; width:100px; height:50px;}
.radius6{border-radius:50%;}
.radius7{border-top-left-radius:50px 100px;}
.radius8{border-top-left-radius:50px 100px; border-top-right-radius:50px 100px;}
.radius9{border-radius:50%; width:100px; height:50px;}
.radius10{border-top-left-radius:50% 100%; border-bottom-right-radius:50% 100%; widht:100px; height:50px;}
.radius11{border-top-raight-radius:100%; border-bottom-left-radius:100%; width:100px; height:50px;}
.radius11{border-top-raight-radius:50%; border-bottom-left-radius:100%; width:100px; height:50%;}

關於border-radius需要注意的是在設置具體的方向值時，需要將top或者bottom設置在left或者raight前面，這個問題我不確定時瀏覽器問題還是語法要求，在我印象中好像誰先誰后不會有影響，但是我在chrome和firefox都必須按照前后順序編寫代碼，不然無法產生效果。然后在回頭來看radius2的示例，這個示例還有一種表示方法：

.radius2{border-radius: 10px 20px 30px 40px/ 10px 20px 30px 40px;}

 2.2-元素陰影：box-shadow

 

一開始在手冊中看到box-shadow在border~background屬性列表下的時候我有點懵，不是邊框和背景屬性嗎？怎么把盒子屬性放到這里呢？是不是手冊搞錯了？后來仔細想想，盒子屬性應該可以分為兩大類：盒子自身樣式屬性和盒子內部元素關系樣式屬性。如果這樣來分其實邊框背景和陰影本身就都是盒子自身樣式屬性了。雖然着對編程沒有任何影響，但是對於記憶和理解知識個人覺得還是很有幫助。

關於box-shadow先從外陰影入手逐一分析每個屬性值的含義，先來看下面這幾個示例：

box-shadow1

box-shadow2

box-shadow3

box-shadow4

box-shadow5

box-shadow6

box-shadow7

box-shadow8

box-shadow9

 

.box-shadow1{box-shasow:10px 10px 0px 0px #00CD66;}
.box-shadow2{box-shasow:10px 10px 0px 5px #00CD66;}
.box-shadow3{box-shasow:10px 10px 5px 5px #00CD66;}
.box-shadow4{box-shasow:10px -5px 0px 0px #00CD66;}
.box-shadow5{box-shasow:10px -5px 0px -5px #00CD66;}

box-shadow的屬性值：橫向移動(x-offtset)、縱向移動(y-offset)、模糊寬度(blur)、擴大寬度(spread)、陰影顏色(color)。

陰影位置（偏移）：x-offset、y-offset負責定義陰影位置，像素值可以是負數。以元素的中心為原點，向x、y方向做正負偏移。

陰影大小（縮放）：spread負責定義陰影大小，大小縮放是同時在四個方向加上設定像素值。

陰影模糊（高斯）：blur負責定義陰影的模糊值，模糊本質上就是一個過度效果，沿着元素邊緣向兩個方向過渡，但是由於陰影有和模型的疊層效果，看上去，外陰影模糊就是向外擴散設定的陰影距離，內陰影模糊就是向內產生設定的陰影模糊過渡距離。所以接着來看這幾個內陰影（inset）的示例：

.box-shadow6{box-shadow:inset 0px 0px 0px 20px #00CD66;}
.box-shadow7{box-shadow:inset 0px 0px 20px 20px #00CD66;}
.box-shadow8{box-shadow:inset 10px 10px 0px 0px #00CD66;}
.box-shadow9{box-shadow:inset -10px -10px 0px 10px #00CD66;}

內陰影可以說是從元素邊緣產生，以陰影偏移或者陰影大小設定的值向元素內容上覆蓋陰影。到這里關於元素陰影box-shadow的基本用法全部介紹完畢了，但是並沒結束。請看下面這幾個示例：

 

 

 

 上面的示例是用css3的box-shadow和border-radius做的一個星球沖撞圖，上面這個不是截圖，而是用代碼實現的，這里有一個全頁面展示的代碼：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    :root,
    body{
        width: 100%;
        height: 100%;
        background-color: #000;
    }
    .div1{
        position: absolute;
        width: 200px;
        height: 200px;
        left: calc(50% - 100px);
        top: calc(50% - 100px);
        border-radius: 50%;
        box-shadow: inset 10px 0px 50px 0px red,
                    inset -10px 0px 50px 0px blue,/*第一階段*/
                    -10px 0px 20px 0px red,
                    -13px 0px 20px 0px blue,
                    -23px 0px 20px -10px red,
                    -33px 0px 20px -20px blue,
                    -43px 0px 30px -30px red,
                    -53px 0px 40px -40px blue,
                    -63px 0px 50px -50px red,
                    -73px 0px 60px -60px blue,
                    -83px 0px 70px -70px red,
                    -93px 0px 80px -80px blue,
                    -100px 0px 80px -90px red,
                    -100px 0px 80px -90px blue;
    }
    .div2{
        position: absolute;
        width: 150px;
        height: 150px;
        left: calc(50% + 150px);
        top: calc(50% - 50px);
        border-radius: 50%;
        box-shadow: inset 10px 0px 50px 0px red,
                    inset -10px 0px 50px 0px blue,/*第一階段*/
                    10px 0px 20px 0px blue,
                    13px 0px 20px 0px red,
                    23px 0px 20px -10px blue,
                    33px 0px 20px -20px red,
                    43px 0px 30px -30px blue,
                    53px 0px 40px -40px red,
                    63px 0px 50px -50px blue,
                    73px 0px 60px -60px red,
                    83px 0px 70px -70px blue,
                    93px 0px 80px -80px red,
                    100px 0px 80px -90px blue,
                    100px 0px 80px -90px red;
    }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>

看起來這個星球沖撞好像很炫酷，實際上代碼實現難度比接下來這個示例要簡單的太多了，這個示例就是太陽，附贈一個月亮：

 

 

 

 

這里的太陽和月亮雖然也是使用代碼實現，但是和我提供的代碼在一些數值上會有一些差別，這是因為陰影需要根據具體的適應場景來調整視覺效果，特別是月亮在博客編輯器中不好使用偽元素實現，采用的是兩個div實現的，下面提供的代碼采用的是偽元素實現的。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .root,
        body{
            width: 100%;
            height: 100%;
            background-color: #000;

        }
        .sun{
            width: 10px;
            height: 10px;
            position: absolute;
            left:calc(50% - 5px);
            top:calc(50% - 5px);
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0px 0px 25px 25px #fff,/*關鍵的一行*/
                        0px 0px 100px 50px #ff0;
        }
    </style>
</head>
<body>
    <div class="sun"></div>
</body>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        :root,
        body{
            width: 100px;
            height: 100px;
            background-color: #000;
        }
        .moon{
            width: 100px;
            height: 100px;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 5px 0px #fff;
        }
        .moon::after{
            content: "";
            width: 100px;
            height: 100px;
            position: absolute;
            left: calc(50% - 75px);
            top: calc(50% - 60px);
            border-radius: 50%;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="moon"></div>
</body>

 2.1-邊框圖片：border-image

 

從兼容性來看，border-image的兼容性不是很好，但因為都有兼容的趨勢，所以學習就是有必要的了。還是和前面一樣，先來一些基本應用的示例：

border-image:
border-image-source | [border-image-slice,border-image-width,border-image-outset] | border-image-repeat

• border-image-source：引入邊框圖片或者創建漸變色來確定圖像。（可以取值“none”表示無圖片。）
• border-image-slice：切割背景圖片，可以采用數值(number)和百分比(percentage)兩種取值方式。
• border-image-width：設置邊框圖像所占邊框寬度，可以設置像素值、數值(根據邊框寬度按倍計算)、百分比(根據slice的取值計算)、auto(同等與100%)。
• border-image-outset:設置邊框圖片向外（四個方向）延申（注意知識純粹延申，不會改變邊框圖片的寬度）。
• border-image-repeat:背景填充方式。拉伸(stretch)（默認值）、重復平鋪(repeat)、當圖片不能整數平鋪時適當縮放(round)、當圖片不能整數平鋪時留白space。

使用下面這張圖片以及后面的示例來描述border-image的使用(圖片的實際像素是300*300px)：

下面是應用border-image設置不同的屬性值組合出的樣式：(在富文本編輯器中實現不了border-image，一下采用等比例截圖作為參考。)

50px²

 

 實現demo1、demo2、demo3的代碼：

 /* demo1 */
 div{
     width: 50px;
     height: 50px;
     font-size: 8px;
     position: absolute;
     background-color: blue;
     top: calc(50% - 50px);
     left: calc(50% - 50px);
     border: 50px solid #fff;
     text-align: center;
     line-height: 50px;
     border-image-source: url('這里是圖片的路徑');
 
     border-image-slice: 100;
     border-image-width: 1;
 }
 /* demo2 */
 div{
     /* 以上代碼同demo1 */
     border-image-slice: 150;
     border-image-width: 1;
 }
 /* demo3 */
 div{
     /* 以上代碼同demo1 */
     border-image-slice: 140;
     border-image-width: 1;
}

 

從demo1可看到border-image-slice:100均勻的將像素300px²的圖片切割成了9等份（實際上slice的數值就是同等於像素值），然后通過border-image-width:1表示邊框背景圖片的寬度等於邊框寬度（即50px），原本像素100px²的被縮放成50px²的背景塊填充到demo1邊框上。

再通過下圖來看看demo1的slice切割模型圖：

 通過demo1的slice切割模型，來思考demo2的slice切割模型，從下面一個手畫草圖可以看到縱橫向都只有一條切割線了，其實不然，因為將slice的值設置為150導致橫向的top、bottom兩條切割線重疊，這兩條線重疊了也就表示重點沒有多余的莫部分，這里可以看作是只將圖片切割成了四等分，但由於需要8個填充塊，所以四條邊框的中間部分就出現了空白部分。

demo3的模型圖就不畫了，從代碼的角度來分析，5\6\7\8這四塊切割部分的像素是寬10（這里可以看到前面所描述的9等份並不嚴謹，因為實際上中間快起作用的切割線只有同一個方向上的兩條，從實際的切割效果來看demo3的的5切割塊寬為10px當高並不是10px），但由於border-image-repeat默認值stretch的拉升效果，出現了填充。

最后關於border-image-width要注意，取值如果是像素值的畫，就表示邊框背景圖片填充的寬度，但不會切割背景圖片，而是將slice切割好的圖片壓縮填充到設定的寬度內。下圖是在demo1的基礎上將border-image-width的值設置為10px的顯示結果。

 

還有slice的值的設置方式，在demo代碼中都是簡寫的，實際上三個demo的slice的值可以寫成一下形式：

border-image-slice: 100 100 100 100;
border-image-slice: 150 150 150 150;
border-image-slice: 150 140 140 140;
/* left right top bottom */
/* 從左向有計算left切割線位置 從右向左計算right切割線的位置 從上到下計算top切割線的位置 從下到上計算bottom切割線的位置 * /

關於border的css屬性就全部介紹完了，常被應用到的屬性還是前面兩個border-radius和box-shadow,而border-image不是很常間的應用屬性，但是由於主流瀏覽器最新版本都已經支持，所以有必要弄明白了。