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

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

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

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

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

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

三者可以多帶帶存在，也可以同時存在。下面將分開對其進行簡單介紹。

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

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

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

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

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

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

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

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

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

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

樣式是邊框最重要的一個方面，因為如果沒有樣式，就沒有邊框，換句話就是說：寬度和顏色都可以沒有，但不能沒有樣式，樣式默認為 none.

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

還是看一下效果圖吧

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

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

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

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

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

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

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

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

CSS 3 中對邊框進行了豐富，增加了 image 和 radius 兩個屬性。

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

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

對一個 div 元素進行測試

相應(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簡寫屬性，其等價于下面的拆寫屬性：

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

下面將對拆分屬性及其值進行概要介紹。

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

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

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

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

border-image-slice: 27; /*等價于 27 27 27 27*/
border-image-slice: 27 20 fill; /*等價于 27 20 27 20 fill*/
border-image-slice: 27 20 22 fill; /*等價于 27 20 22 20 fill*/

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

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

如果沒有邊框圖像寬度定義，則默認邊框圖像寬度等于邊框?qū)挾龋绻羞吙驁D像寬度定義，則以邊框圖像寬度為準。

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

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

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

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

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

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

border-image-outset: 30px 10px;

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

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

stretch

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

repeat

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

round

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

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

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

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

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 中新增了邊框圓角的樣式。

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

border-radius: 15px; /*等價于 15px 15px 15px 15px*/
border-radius: 10% 10px; /*等價于 10% 10px 10% 10px*/

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

border-top-left-radius: 15px/15px; /*等價于 15px*/

通過下圖你會對圓角有更加形象的認識。

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

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

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

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

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

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

語法

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

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

水平和垂直陰影位置是必選項，其值可以為負值。

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

陰影跟光源有關(guān)，光源的位置不同，陰影也不同，光源的數(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;
}

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