摘要：概覽邊框本應(yīng)該在盒模型一文中一并介紹，只因?yàn)楸苊馄^長特獨(dú)立此文與輪廓和陰影一并介紹。之所以將邊框，輪廓和陰影一并介紹，看下圖就明白了輪廓是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。水平陰影的位置。陰影擴(kuò)散的尺寸。

邊框本應(yīng)該在盒模型一文中一并介紹，只因 為避免篇幅較長特獨(dú)立此文與輪廓和陰影一并介紹。

之所以將邊框，輪廓和陰影一并介紹，看下圖就明白了：

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

陰影 （box-shadow）是CSS 3新增的屬性，用來向元素框添加陰影。

三者可以多帶帶存在，也可以同時(shí)存在。下面將分開對(duì)其進(jìn)行簡單介紹。

HTML 元素的邊框有四個(gè)，每個(gè)邊框有 3 個(gè)方面：寬度、樣式、以及顏色。

/* border: 寬度 樣式 顏色; */
border: 1px solid red;

/* 等價(jià)于 */
border-width: 1px;
border-style: solid;
border-color: red;

上表對(duì)邊框的屬性進(jìn)行了分組以方便記憶。第一行屬性為簡寫屬性，分別對(duì)應(yīng)其下的三個(gè)具體屬性?，F(xiàn)僅對(duì)其中一組具體屬性（第一列吧）進(jìn)行介紹。

邊框的寬度有兩種值可選，一種是指定長度值，比如 2px 或 0.1em,另一種是使用 3 個(gè)關(guān)鍵字之一，它們分別是 thin 、medium（默認(rèn)值） 和 thick。

注釋：CSS 沒有定義 3 個(gè)關(guān)鍵字的具體寬度，所以一個(gè)用戶代理可能把 thin 、medium 和 thick 分別設(shè)置為等于 5px、3px 和 2px，而另一個(gè)用戶代理則分別設(shè)置為 3px、2px 和 1px。

p {border-style: solid; border-width: 5px;}
p {border-style: solid; border-width: thick;}

由于邊框有四個(gè)方位，所以border-width有四個(gè)值可填，如若部分省略，同樣遵循 值復(fù)制 原則。

p {border-style: solid; border-width: 5px;} /* 等價(jià)于 5px 5px 5px 5px */
p {border-style: solid; border-width: 5px 3px;} /* 等價(jià)于 5px 3px 5px 3px */
p {border-style: solid; border-width: 5px 3px 2px;} /* 等價(jià)于 5px 3px 2px 3px */

其他具體方位邊框?qū)挾龋?b>border-top-width,border-left-width等）只能填一個(gè)值。

樣式是邊框最重要的一個(gè)方面，因?yàn)槿绻麤]有樣式，就沒有邊框，換句話就是說：寬度和顏色都可以沒有，但不能沒有樣式，樣式默認(rèn)為 none.

CSS 中定義了十種邊框樣式。

還是看一下效果圖吧

和寬度一樣，樣式也可以分別作用在四個(gè)方位，并且遵循著相同的值復(fù)制規(guī)則。

border-style: dotted solid double dashed; 
border-style: dotted solid double;
border-style: dotted solid;
border-style: dotted;

設(shè)置邊框顏色非常簡單。

可以使用任何類型的顏色值，例如可以是命名顏色（red,blue等），也可以是十六進(jìn)制（#ff0000）和 RGB 值：

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}

除了上面的三種值可選外，還有一個(gè) transparent 透明邊框可選，不是太常用。

另外，當(dāng)我們不指定邊框顏色的時(shí)候，只指定邊框樣式，邊框也是有顏色和寬度的。它將與元素的文本顏色相同。另一方面，如果元素沒有任何文本，假設(shè)它是一個(gè)表格，其中只包含圖像，那么該表的邊框顏色就是其父元素的文本顏色（因?yàn)?color 可以繼承）。

注意：在 IE7 之前，沒有提供對(duì) transparent 的支持。在以前的版本，IE 會(huì)根據(jù)元素的 color 值來設(shè)置邊框顏色。

CSS 3 中對(duì)邊框進(jìn)行了豐富，增加了 image 和 radius 兩個(gè)屬性。

邊框圖像稍微有點(diǎn)復(fù)雜，先看一個(gè)例子來體會(huì)其簡單用法：

使用的圖像尺寸為: 81 x 81px

對(duì)一個(gè) div 元素進(jìn)行測(cè)試

相應(yīng)樣式

div.demo {
    width:150px;
    height:80px;
    margin:50px auto;

    border-style:solid;
    border-width:20px;
    border-image:url("border.png") 27 fill/27px/30px repeat;
}

得到下面的樣式

上例我們使用了border-image簡寫屬性，其等價(jià)于下面的拆寫屬性：

border-image-source: url("border.png");
border-image-slice: 27 fill;
border-image-width: 27px;
border-image-outset: 30px;
border-image-repeat: repeat;

下面將對(duì)拆分屬性及其值進(jìn)行概要介紹。

這個(gè)很好理解，用來指定使用的圖像。

這個(gè)屬性用來控制圖像的切分。給定一個(gè)邊框圖像都會(huì)經(jīng)過四次切分，你可以形象的按下圖理解其切分流程。

經(jīng)過四次切分后，得到9個(gè)區(qū)域（俗稱“九宮格”）

border-image-slice 屬性及值就是控制切分的偏移量的，類似border-width,它也有四個(gè)方位，并且遵循 值復(fù)制 規(guī)則，不同的是：截取的尺寸不需要單位，尺寸后可以添加fill關(guān)鍵字。

border-image-slice: 27; /*等價(jià)于 27 27 27 27*/
border-image-slice: 27 20 fill; /*等價(jià)于 27 20 27 20 fill*/
border-image-slice: 27 20 22 fill; /*等價(jià)于 27 20 22 20 fill*/

關(guān)鍵字fill標(biāo)示中間區(qū)域?qū)⒊霈F(xiàn)（出現(xiàn)歸出現(xiàn)，至于能否看見，要看你截取的中間區(qū)域部分是否有可見圖像），如下圖：

邊框圖像寬度屬性用來設(shè)置邊框圖像的寬度，邊框圖像寬度和邊框?qū)挾炔皇且淮a事，但有部分關(guān)聯(lián)。

如果沒有邊框圖像寬度定義，則默認(rèn)邊框圖像寬度等于邊框?qū)挾?，如果有邊框圖像寬度定義，則以邊框圖像寬度為準(zhǔn)。

下圖為沒有定義邊框圖像寬度的情形，邊框圖像寬度等于邊框?qū)挾取?/p>

下圖為設(shè)置了邊框圖像寬度的情形：

邊框圖像寬度大于邊框?qū)挾?，圖像向邊框內(nèi)溢出。

邊框圖像寬度也類似與邊框?qū)挾鹊亩x，也是四個(gè)方位值，也遵循值復(fù)制規(guī)則。

此屬性用來設(shè)置邊框圖像向邊框外偏移的量。

在上面的圖中我們看到圖像向邊框內(nèi)溢出了，如果擔(dān)心向內(nèi)溢出遮擋內(nèi)容，我們可以通過此屬性讓其向外溢出一定尺寸。

border-image-outset: 30px 10px;

此屬性的值設(shè)置也是四個(gè)方位，同樣遵循值復(fù)制規(guī)則。

此屬性控制著邊框圖像復(fù)制延伸的方式。有三個(gè)值可選：

stretch

拉伸圖像來填充區(qū)域，比較好理解。默認(rèn)屬性值。

repeat

平鋪（重復(fù)）圖像來填充區(qū)域，從中間向兩邊復(fù)制。

round

類似 repeat 值。如果無法完整平鋪所有圖像，則對(duì)圖像進(jìn)行縮放以適應(yīng)區(qū)域。

使用 round 最明顯的好處是保證截取區(qū)域的完整性，而不像 repeat 會(huì)出現(xiàn)一半的情況，round 可能會(huì)進(jìn)行少量的縮放。

下圖為 上下 round 左右 repeat 可以對(duì)比一下區(qū)別。

另外，此屬性雖說也有四個(gè)方位，但最多只能設(shè)置兩個(gè)值：上下一致，左右一致。

border-image-repeat: round repeat;

邊框圖像的簡寫屬性，可以將上述具體屬性集中到此屬性中，知道其語法格式即可，上面已經(jīng)有過例子了。

border-image: border-image-source border-image-slice/border-image-width/border-image-outset border-image-repeat;

CSS 3 中新增了邊框圓角的樣式。

圓角相對(duì)比較簡單，只有一個(gè)簡寫屬性（border-radius）和四個(gè)具體方位屬性，對(duì)于圓角來說，四個(gè)方位不再是上下左右了，而是：左上角（border-top-left-radius），右上角（border-top-right-radius），右下角（border-bottom-right-radius），左下角（border-bottom-left-radius）。屬性值同樣遵循 值復(fù)制 規(guī)則。

border-radius: 15px; /*等價(jià)于 15px 15px 15px 15px*/
border-radius: 10% 10px; /*等價(jià)于 10% 10px 10% 10px*/

由于每個(gè)角都涉及兩個(gè)方位（如：左上，關(guān)聯(lián) top 和 left），所以每個(gè)角可以設(shè)置兩個(gè)值分別對(duì)應(yīng)角上的兩個(gè)方位，兩個(gè)值使用 / 分隔，前面的表示上下的值，后面的表示左右的值。如果兩個(gè)值相同，只寫一個(gè)即可。

border-top-left-radius: 15px/15px; /*等價(jià)于 15px*/

通過下圖你會(huì)對(duì)圓角有更加形象的認(rèn)識(shí)。

outline 輪廓是繪制于元素周圍的線，位于邊框邊緣的外圍，可起到突出元素的作用。

注釋：輪廓線不會(huì)占據(jù)空間。

輪廓的使用同邊框，但沒有邊框那么復(fù)雜。輪廓只有：outline（簡寫屬性，集中樣式，尺寸，顏色的設(shè)置）,outline-style,outline-width,outline-color,4個(gè)屬性可選，沒有像邊框似的對(duì)四個(gè)方位的具體設(shè)置相關(guān)的屬性。

由于其使用及相應(yīng)的屬性值跟邊框相同，故不再贅述。

box-shadow 陰影屬性用來向框添加一個(gè)或多個(gè)陰影。

div {
    box-shadow: 10px 10px 5px #888888;
}

語法

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow 向框添加一個(gè)或多個(gè)陰影。該屬性是由逗號(hào)分隔的陰影列表，每個(gè)陰影由 2-4 個(gè)長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。

水平和垂直陰影位置是必選項(xiàng)，其值可以為負(fù)值。

畫過素描的同學(xué)會(huì)很容易理解陰影（沒畫過的也很容易理解的）。

陰影跟光源有關(guān)，光源的位置不同，陰影也不同，光源的數(shù)量多少也決定著陰影的效果，物體的形狀也影響陰影。

想象上圖是一個(gè)桶，所成的陰影是我們從桶的上面去看，光線方向大致在桶的左上方所致。

代碼實(shí)現(xiàn)為：

div {
    width:100px;
    height:100px;
    margin: 100px auto;
    background-color:#ff8888;
    border:1px solid #000;
    border-radius: 50%;
    box-shadow: 10px 10px 5px #888888,
        10px 10px 5px #888 inset;
}

邊框和輪廓都是由樣式，寬度和顏色進(jìn)行定義，還可以給邊框添加圓角，使其更加美觀，陰影的使用可以使元素更加符合生活場(chǎng)景。