CSS 邊框 輪廓 陰影

概覽

邊框本應該在盒模型一文中一併介紹，只因 爲避免篇幅較長特獨立此文與輪廓和陰影一併介紹。

之因此將邊框，輪廓和陰影一併介紹，看下圖就明白了：

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

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

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

三者能夠單獨存在，也能夠同時存在。下面將分開對其進行簡單介紹。

邊框 border

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

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

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

邊框	上邊框	右邊框	下邊框	左邊框
border	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

上表對邊框的屬性進行了分組以方便記憶。第一行屬性爲簡寫屬性，分別對應其下的三個具體屬性。現僅對其中一組具體屬性（第一列吧）進行介紹。

寬度 width

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

註釋：CSS 沒有定義 3 個關鍵字的具體寬度，因此一個用戶代理可能把 thin 、medium 和 thick 分別設置爲等於 5px、3px 和 2px，而另外一個用戶代理則分別設置爲 3px、2px 和 1px。

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

因爲邊框有四個方位，因此border-width有四個值可填，如若部分省略，一樣遵循 值複製 原則。

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 */

其餘具體方位邊框寬度（border-top-width,border-left-width等）只能填一個值。

樣式 style

樣式是邊框最重要的一個方面，由於若是沒有樣式，就沒有邊框，換句話就是說：寬度和顏色均可以沒有，但不能沒有樣式，樣式默認爲 none.

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

值	描述
none	定義無邊框。
hidden	與 none 相同。
dotted	定義點狀邊框。
dashed	定義虛線。
solid	定義實線。
double	定義雙線。雙線的寬度等於 border-width 的值。
groove	定義 3D 凹槽邊框。
ridge	定義 3D 壟狀邊框。
inset	定義 3D inset 邊框。
outset	定義 3D outset 邊框。
inherit	規定應該從父元素繼承邊框樣式。

仍是看一下效果圖吧

和寬度同樣，樣式也能夠分別做用在四個方位，而且遵循着相同的值複製規則。

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

顏色 color

設置邊框顏色很是簡單。

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

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

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

另外，當咱們不指定邊框顏色的時候，只指定邊框樣式，邊框也是有顏色和寬度的。它將與元素的文本顏色相同。另外一方面，若是元素沒有任何文本，假設它是一個表格，其中只包含圖像，那麼該表的邊框顏色就是其父元素的文本顏色（由於 color 能夠繼承）。

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

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

圖像 image

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

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

對一個 div 元素進行測試

<div class="demo"></div>

相應樣式

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;

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

border-image-source

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

border-image-slice

這個屬性用來控制圖像的切分。給定一個邊框圖像都會通過四次切分，你能夠形象的按下圖理解其切分流程。

通過四次切分後，獲得9個區域（俗稱「九宮格」）

border-image-slice 屬性及值就是控制切分的偏移量的，相似border-width,它也有四個方位，而且遵循 值複製 規則，不一樣的是：截取的尺寸不須要單位，尺寸後能夠添加fill關鍵字。

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*/

關鍵字fill標示中間區域將出現（出現歸出現，至於可否看見，要看你截取的中間區域部分是否有可見圖像），以下圖：

border-image-width

邊框圖像寬度屬性用來設置邊框圖像的寬度，邊框圖像寬度和邊框寬度不是一碼事，但有部分關聯。

若是沒有邊框圖像寬度定義，則默認邊框圖像寬度等於邊框寬度，若是有邊框圖像寬度定義，則以邊框圖像寬度爲準。

下圖爲沒有定義邊框圖像寬度的情形，邊框圖像寬度等於邊框寬度。

下圖爲設置了邊框圖像寬度的情形：

邊框圖像寬度大於邊框寬度，圖像向邊框內溢出。

邊框圖像寬度也相似與邊框寬度的定義，也是四個方位值，也遵循值複製規則。

border-image-outset

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

在上面的圖中咱們看到圖像向邊框內溢出了，若是擔憂向內溢出遮擋內容，咱們能夠經過此屬性讓其向外溢出必定尺寸。

border-image-outset: 30px 10px;

此屬性的值設置也是四個方位，一樣遵循值複製規則。

border-image-repeat

此屬性控制着邊框圖像複製延伸的方式。有三個值可選：

stretch

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

repeat

平鋪（重複）圖像來填充區域，從中間向兩邊複製。

round

相似 repeat 值。若是沒法完整平鋪全部圖像，則對圖像進行縮放以適應區域。

使用 round 最明顯的好處是保證截取區域的完整性，而不像 repeat 會出現一半的狀況，round 可能會進行少許的縮放。

下圖爲 上下 round 左右 repeat 能夠對比一下區別。

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

border-image-repeat: round repeat;

border-image

邊框圖像的簡寫屬性，能夠將上述具體屬性集中到此屬性中，知道其語法格式便可，上面已經有過例子了。

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

圓角 radius

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

圓角相對比較簡單，只有一個簡寫屬性（border-radius）和四個具體方位屬性，對於圓角來講，四個方位再也不是上下左右了，而是：左上角（border-top-left-radius），右上角（border-top-right-radius），右下角（border-bottom-right-radius），左下角（border-bottom-left-radius）。屬性值一樣遵循 值複製 規則。

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

因爲每一個角都涉及兩個方位（如：左上，關聯 top 和 left），因此每一個角能夠設置兩個值分別對應角上的兩個方位，兩個值使用 / 分隔，前面的表示上下的值，後面的表示左右的值。若是兩個值相同，只寫一個便可。

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

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

輪廓 outline

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

註釋：輪廓線不會佔據空間。

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

因爲其使用及相應的屬性值跟邊框相同，故再也不贅述。

陰影 box-shadow

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

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

語法

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

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

值	描述
h-shadow	必需。水平陰影的位置。容許負值。
v-shadow	必需。垂直陰影的位置。容許負值。
blur	可選。模糊距離。
spread	可選。陰影擴散的尺寸。
color	可選。陰影的顏色。
inset	可選。將外部陰影 (默認爲外部陰影) 改成內部陰影。

水平和垂直陰影位置是必選項，其值能夠爲負值。

畫過素描的同窗會很容易理解陰影（沒畫過的也很容易理解的）。

陰影跟光源有關，光源的位置不一樣，陰影也不一樣，光源的數量多少也決定着陰影的效果，物體的形狀也影響陰影。

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

代碼實現爲：

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;
}

小結

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