邊框是CSS盒模型屬性中默默無聞的一個普通屬性，CSS3的到來，但得邊框屬性重新煥發(fā)了光彩。本文將詳細介紹CSS邊框

基礎樣式

邊框是一條以空格分隔的集合樣式，包括邊框粗細(邊框寬度)、邊框顏色和邊框樣式，且先后順序無關

    border: border-width border-color border-style    border: 1px solid red;

【邊框樣式】

如果一個邊框沒有樣式，邊框將根本不會存在

關于虛線dashed，在chrome/firefox下，虛線寬高比是3/1；而在IE下，虛線寬高比為2/1。所以在IE下虛線顯得比較密

關于點線dotted，在chrome下，點線是方點；而在IE/firefox下，點線是圓點

border-style:none(默認)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9種)

【邊框寬度】

邊框的寬度不能為負，不能指定為百分比值。這是因為，邊框并不會因為設備尺寸變大，所以百分比單位并不符合語義。類似地，還有outline、box-shadow、text-shadow等

邊框寬度支持3個關鍵字：this/medium/thick，分別是1px、3px、5px，且medium為默認值。medium為3px是因為邊框樣式double至少為3px為有效果

    border-width: thin/medium(默認)/thick/

【邊框顏色】

默認的邊框顏色是元素本身的前景色，即元素的文本顏色；如果元素沒有任何文本，則邊框顏色是其父元素的文本顏色。但是，在表格中，若只設置border-style，而不設置border,則邊框顏色為黑色，而不與文本顏色相同。類似地，還有text-shadow、box-shadow等

    border-color: transparent/

[注意]在CSS2.1中，背景定位background-position只能相對于左上角定位。如果需要是相對于右側，則可以使用一個右側的透明邊框來實現(xiàn)類似的效果

<演示框>點擊下列相應屬性值可進行演示

邊框要點

【注意事項】

邊框有以下幾個要點需要特別注意：

1、邊框繪制在元素背景之上，如果邊框樣式有某種縫隙，可以通過這些縫隙看到元素的背景(有兼容問題)

2、同一元素的邊框相交處是斜線，可以用邊框實現(xiàn)三角形

3、行內(nèi)元素的上下邊框由于不影響行高，不影響布局；左右邊框會影響布局

4、在CSS2.1中，背景定位background-position只能相對于左上角定位。如果需要是相對于右側，則可以使用一個右側的透明邊框來實現(xiàn)類似的效果

【邊框單邊】

        border-top/border-right/border-bottom/border-left

【邊框屬性】

    border-width:
        border-top-width    border-right-width
        border-bottom-width    border-left-width

    border-style:
        border-top-style    border-right-style
        border-bottom-style    border-left-style

    border-color：
        border-top-color    border-right-color
        border-bottom-color    border-left-color

【四值順序】

    border-width: 1px 2px 3px 4px;//上右下左
    border-width: 1px 2px 3px;//上(左右)下
    border-width: 1px 2px;//(上下)(左右)
    border-width: 1px;//(上下左右)

多色邊框

多色邊框border-colors可以在一條邊框上設置多種顏色

[注意]只有firefox支持，需要加-moz-前綴，且只能四條邊分開寫，否則無效

    border-colors:……    border: 10px solid black;    -moz-border-top-colors: red green;    -moz-border-right-colors: green yellow;    -moz-border-bottom-colors: yellow blue;    -moz-border-left-colors: blue red;

圓角邊框

圓角邊框border-radius可以為邊框設置圓角(IE8-不支持)，四值順序是左上、右上、右下、左下

border-radius: none(默認)
border-radius: {1,4}[/{1,4}]?//如果反斜杠存在，前面的值是水平方向的半徑，后面的值是垂直方向的半徑。如果沒有則水平和垂直方向相等

關于圓角邊框有如下注意事項：

1、可以是具體值，也可以是百分比，但不是負數(shù)

2、重置border-radius沒有圓角，使用none無效，需要取值0

3、border-radius對沒有任何效果

4、如果取值為百分比，水平方向圓角百分比相對于寬度，垂直方向圓角百分比相對于高度

【圓角單角】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
border-top-left-radius: 10px 20px;

[注意]寫圓角單角時不可加/

【四值順序】

四值順序是左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

【內(nèi)徑外徑】

border-radius內(nèi)徑 = 外徑 - 對應的邊框寬度

當border-radius半徑值小于等于邊框寬度時，元素沒有內(nèi)徑效果

【特殊圖形】

圓形

元素的寬高相同，且圓角半徑為寬高的一半

div{    width: 100px;    height: 100px;    border-radius: 50%;
}

半圓

元素寬高不同，且圓角半徑與寬高要配合

div{    width: 100px;    height: 50px;    border-radius: 50px 50px 0 0;
}

扇形

元素寬高及一個圓角半徑相同

div{    width: 50px;    height: 50px;    border-radius: 50px 0 0 0;
}

橢圓

元素寬高不同，且水平和垂直半徑分別對應寬高

div{    width: 120px;    height: 80px;    border-radius: 120px/80px;
}

盒子陰影

盒子陰影box-shadow可以為元素設置陰影(IE8-不支持)

box-shadow: none(默認)box-shadow: (h-shadow v-shadow blur spread color inset)+;h-shadow: 水平陰影位置(必須)v-shadow: 垂直陰影位置(必須)blur:     模糊距離(可選)spread:   陰影尺寸(可選)color:    陰影顏色，默認和文本顏色一致(可選)inset:    內(nèi)部陰影(可選)    
box-shadow:10px 10px red,20px 20px blue;

使用盒子陰影box-shadow時，有如下幾點注意事項：

1、可以使用多重陰影，但使用過多會造成性能差

2、邊框在內(nèi)陰影之上，內(nèi)陰影在背景圖片之上，背景圖片在背景色之上，背景色在外陰影之上

3、內(nèi)陰影對元素沒有任何效果

4、最先寫的陰影在最頂層

5、該屬性與border-radius一脈相承，若通過border-radius設置為圓角，則box-shadow的最終呈現(xiàn)也將是圓角

【模擬邊框】

box-shadow: 0 0 0 10px blue;

<演示框>點擊下列相應屬性值可進行演示

圖片邊框

圖片邊框border-p_w_picpath可以在邊框位置設置圖片(IE10-不支持)

border-p_w_picpath: none(默認)
border-p_w_picpath: border-p_w_picpath-source || border-p_w_picpath-slice [ / border-p_w_picpath-width? | / border-p_w_picpath-outset ]? || border-p_w_picpath-repeat;

[注意]該屬性的作用是用來替代border-style的，若border-p_w_picpath為none，則顯示border-style的值

border-p_w_picpath: url('img.img') 27 fill / 27 / 27px repeat;

【border-p_w_picpath-source】

邊框的圖片路徑

border-p_w_picpath-source:url('test.img');

【border-p_w_picpath-slice】

圖片邊框四條切割線的位置

border-p_w_picpath-slice:   |  fill

使用border-p_w_picpath-slice時，有如下幾點注意事項：

1、若不寫單位，具體值默認單位是px

2、fill表示圖片邊框的中間部分將保留下來

3、四值方向是上右下左，代表切割線的方向，切割的分別是高寬高寬

4、圖片邊框是在邊框范圍內(nèi)顯示的，若邊框寬度不等于slice切片值，則圖片邊框會按比例放大縮小，以使圖片邊框正好顯示在邊框范圍內(nèi)

5、若slice值為負，或大于盒子的寬度或高度會被100%，四個角將顯示整個背景圖片

6、若右切和左切大于盒子寬度，則上中和下中部分為空；若上切和下切大于盒子高度，則左中和右中部分為空

【border-p_w_picpath-width】

邊框寬度border-p_w_picpath-width。若指定該值，則邊框圖片寬度由該值確定，否則由盒子的邊框寬度來確定。該值可以用具體像素、數(shù)字(表示幾倍)以及百分比來表示，遵循四值順序

border-p_w_picpath-width:  |  |  | auto

【border-p_w_picpath-outset】

border-p_w_picpath-outset表示邊框圖像區(qū)域超出邊框的量，可以用具體像素和數(shù)字(表示幾倍)表示，遵循四值順序

border-p_w_picpath-outset:0(默認)border-p_w_picpath-outset:  | 

【border-p_w_picpath-repeat】

邊框圖片的排列方式

border-p_w_picpath-repeat: stretch(拉伸,默認) | repeat(重復) | round(平鋪) [1,2]//第一個值表示水平方向的排列方式，第二個值表示垂直方向的排列方式

在上面的屬性值中，repeat是邊框中間向兩端平鋪，可能造成兩端邊緣被切的現(xiàn)象；而round會對邊框背景圖的切片進行縮放，使其正好顯示

【按鈕實現(xiàn)】

div{    display: inline-block;    border-p_w_picpath: url('button.png') 16 fill/ auto / 5px;
}

應用

【三道杠效果】

  三道杠可以使用邊框來實現(xiàn)，上面兩道杠使用上邊框的double樣式，下面一道杠使用下邊框的solid樣式