1. 應用邊框樣式
先從控制邊框樣式的屬性開始。簡單邊框有三個關鍵屬性：border-width、border-style 和 border-color 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border-width:5px; border-style:solid; border-color: black;; } </style> </head> <body> <p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </body> </html>
在代碼中，使用了p元素定義了一個段落，使用 style 元素為這個段落應用邊框樣式，邊框樣式是通過設置 border-width、border-style 和 border-color 屬性來定義的。
1.1 設置邊框的寬度
border-width 屬性的取值可能是常規CSS長度值，可能是邊框繪制區域寬度的百分數，也可能是三個快捷值中的任意一個。下表描述了邊框寬度的可能取值。邊框寬度默認值是 medium 。
1.2 定義邊框樣式
border-style 屬性的值可以是下表的任意一個。默認值是 none，即沒有。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> span { width:160px; height: 100px; margin: 5px; display: block; float: left; text-align: center;line-height: 100px;} .border-none { border-style: none;} .border-dashed { border-style: dashed;} .border-dotted { border-style: dotted;} .border-double { border-style: double;} .border-groove { border-style: groove;} .border-inset { border-style: inset;} .border-outset { border-style: outset;} .border-ridge { border-style: ridge;} .border-solid { border-style: solid;} </style> </head> <body> <div> <span class="border-none">None</span> <span class="border-dashed">Dashed</span> <span class="border-dotted">Dotted</span> <span class="border-double">Double</span> <span class="border-groove">Groove</span> <span class="border-inset">Inset</span> <span class="border-outset">Outset</span> <span class="border-ridge">Ridge</span> <span class="border-solid">Solid</span> </div> </body> </html>
這些邊框的外觀效果如下圖所示：
1.3 位一條邊應用邊框樣式
元素的四條邊可以應用不同的邊框樣式，這就要用到特定屬性，如下表所示：
可以使用這些元素為元素的邊應用邊框樣式，也可以將它們與更為通用的屬性結合使用來顛覆特定的邊框樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border-width: 5px; border-style:solid; border-color: black; border-left-width: 10px; border-left-style: dotted; border-top-width:10px; border-top-style: dotted; } </style> </head> <body> <div> <p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </div> </body> </html>
這些屬性設置的效果如下圖所示：
1.4 使用 border 簡寫屬性
也可以不用分開設置樣式、寬度和顏色，而使用簡寫屬性以此搞定。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:medium solid black; border-top:solid 10px;; } </style> </head> <body> <div> <p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </div> </body> </html>
注意，這里沒有為 border-top 設置指定顏色值。如果忘了設置某些值，瀏覽器會使用以前定義的值，這里使用的是 border 簡寫屬性定義的顏色。
1.5 創建圓角邊框
可以使用邊框的 radius 特性創建圓角邊框。
指定兩個半徑值即可定義一個圓角，采用長度值和百分數值均可。第一個值指定水平曲線半徑，第二個值指定垂直曲線半徑。百分數值是相對於元素盒子的寬度和高度來說的。下圖展示了兩個半徑值如何確定一個圓角。
從圖中可以看出，半徑值用來確定一個位於元素盒子內部，員元素盒子相交的橢圓，並決定了圓角邊框的形狀。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:medium solid black; border-top-left-radius: 20px 15px;; } </style> </head> <body> <div> <p> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> </div> </body> </html>
如果只提供一個值，那么水平半徑和垂直半徑都是這個值。
PS:注意圖中的圓角接觸到了文本。要讓元素的內容和邊框之間有一定距離，可以為元素盒子添加 padding 屬性。
使用border-radius 簡寫屬性可以為邊框的四個角指定一個值，或者在一個值中包含四個值，做法如下面代碼清單所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:medium solid black; } #first { border-radius: 20px / 15px;; } #second { border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%;; } </style> </head> <body> <div> <p id="first"> 你的特別不是因為你在創業，不是因為你進了牛企，不是因為你的牛offer，而是因為你就是你，堅信自己的特別，堅信自己的內心，勇敢做自己。 IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE. </p> <p id="second"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
代碼中定義了兩個段落，每個段落分別有一個圓角邊框聲明。第一條聲明只指定了兩個值，這一對值會應用到邊框的四個角上。注意，要用 / 字符將水平半徑和垂直半徑隔開。第二條聲明指定了8個值。第一組的四個值分別是四個角的水平半徑，第二組的四個值是相應的垂直半徑。兩組值之間也用 / 字符分開了。兩條聲明的效果如下圖所示。
1.6 將圖像用作邊框
邊框不僅限於用 border-style屬性定義的樣式，可以用圖像為元素創建真正的自定義邊框。配置圖像邊框各個方面的屬性有5個，外加一個可以在一條聲明中配置所有特征的簡寫屬性。
(1)切分圖像
將圖像用作邊框的關鍵是切分圖像。開發人員制定圖像邊框向內偏移的值，瀏覽器會使用這些值來講圖像分為9塊。下面的圖像能簡單明了地表達瀏覽器如何進行切分以及使用每塊切分圖(title)：
該圖像大小為90px * 90px，每個切分圖是30px * 30px。中間的切分圖是透明的。要切分圖像，應該提供圖像邊框在四個方向上向內偏移的值，用長度值或者相對圖像尺寸的百分數表示均可。可以提供四個不同的值，也可以只提供兩個值（分部表示水平方向和垂直方向的偏移量），當然只有一個值也可以（四個偏移量一樣）。對於這個圖像，這里使用了一個值：30px，創建了需要的切分，如下圖所示：
切分圖像后生成8個切分面，標記為1、3、6、8的切分圖分別用於繪制邊框的四個角，標記為2、4、5、7的切分圖分別用來繪制邊框的四條邊。下面代碼展示了瀏覽器特定屬性如何切分圖像並將切分圖用於邊框樣式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:30px solid black; border-image:url("imgs/bordergrid.png") 30 / 30px; } </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
每個屬性聲明的參數都一樣。必須使用url功能指定圖像來源（因為CSS規范保留了實現獲取圖像其他方式的權利）。每條聲明中，只提供了一個切分值30，根示例圖像中的切分圖尺寸一樣。注意：指定切分尺寸不需要單位，默認使用px。
切分值和邊框寬度值之間使用了 / 字符進行分割。可以為元素的每條邊指定不同的寬度，不過此處只提供了一個值（30px），即四條邊都會使用這個值。
效果如下：
可以從圖中看到瀏覽器是如何使用每塊切分圖的。 標記為2和7的切分點有點不好辨認，它們分別用到了頂邊和底邊上。
(2) 控制切分圖重復方式
在上面的示例效果中可以明顯看到，為了填滿邊框的整個空間，切分圖被拉伸了。可以改變圖像重復方式，得到不同的呈現效果。 border-image-repeat 屬性就能實現這個功能，不過， 使用簡寫屬性也能指定重復樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:30px solid black; border-image:url("imgs/bordergrid.png") 30 / 30px round repeat; } </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
在代碼中，第一個值指定了切分圖的水平重復樣式，第二個值指定了垂直重復樣式。如果只提供一個值，那么水平和垂直樣式一樣。從效果圖中可以看出這兩個值的區別。
2. 設置元素的背景
盒模型的另一個可見區域是元素的內容。
2.1 設置背景顏色和圖像
設置元素背景的起點是設置背景顏色或者背景圖像，也可以使用背景屬性同時設置兩者。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:medium solid black; background-color: lightgray; background-image: url("imgs/banana.png"); background-size:40px 40px; background-repeat: repeat-x; } </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
此例中，將背景顏色設置為淺灰色，並使用url加載了一張名為banana.png的圖像，將其作為background-image屬性的值。可以看到效果圖如下。背景圖像總是顯示在背景顏色上。
這個背景圖像多少有些遮蓋了元素中的文本，除非非常小心，添加背景圖像通常都會出現這種情況。
我們可以單獨指定水平方向和垂直方向的重復樣式，要是只有一個值得話，兩個方向均會使用同種重復樣式。repeat-x 和 repeat-y 是例外，瀏覽器對於后者使用no-repeat樣式。
2.2 設置背景圖像的尺寸
在前面的示例中，指定的圖像對於元素來說太大了，因此代碼中使用了 background-size屬性將圖像調整為40px * 40px。除了使用長度值，屬性值還可以是百分數（跟圖像的寬度和高度相關）、預定義值（如下表所示）。
contain值確保圖像調整尺寸后，整個圖像始終包含在元素內部。瀏覽器判斷圖像長度和高度哪個更大，並將較大者調整至容器相應寬度或者高度大小。相反，如果屬性取cover值，瀏覽器選中較小的值，並沿着該方向調整圖像大小。這就意味着圖像的某一部分可能不會顯示，從下圖可以看出兩者的不同之處。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:medium solid black; background-color: lightgray; background-image: url("imgs/banana.png"); background-repeat: no-repeat; } #first{background-size: cover;} #second{background-size: contain;} </style> </head> <body> <div> <p id="first"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> <p id="second"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
香蕉圖像的高度要比寬度大，這就是說你在使用cover值得時候，應該調整圖像尺寸，使得寬度方向上能被完全顯示，即使這會導致高度方向上顯示不完整。這個呈現效果可以從上圖上面的元素背景圖像設置看出來。要是使用contain值，就必須確保高度方向能在元素盒子中完全呈現，也就是說能顯示完整的圖像，即使最終圖像不能覆蓋整個背景區域。這個取值的呈現效果可以從上圖下面的元素背景圖像設置看出來了。
2.3 設置背景圖像位置
瀏覽器使用 background-position 屬性設置背景圖像的位置。圖像不平鋪的時候這個屬性用得最多。該屬性的使用方法如下面代碼所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:10px double black; background-color: lightgray; background-image: url("imgs/banana.png"); background-size:40px 40px; background-repeat: no-repeat; background-position: 30px 10px; } </style> </head> <body> <div> <p id="first"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
這條聲明告訴瀏覽器將背景圖像設置為距離左邊界30像素，距離頂部邊界10像素。這里使用了長度指定位置，也可以使用下表列出的預定義值：
第一個值控制垂直位置，可以是 top、bottom和center，第二個值控制水平位置，可以是left、right和center。從此例的效果圖可以看出設置圖像位置的效果。
2.4 設置元素的背景附着方式
為具有視窗的元素應用背景時，可以指定背景附着內容的方式。textarea 是常見的具有視窗的元素，可以自動添加滾動條以顯示內容。另一個例子是body元素，如果其中的內容比瀏覽器的窗口長，可以為其設置滾動條。使用 background-attachment屬性可以控制背景的附着方式。
2.5 設置背景圖像的開始位置和裁剪樣式
背景的起始點（origin）指定背景顏色和背景圖像應用的位置。裁剪樣式決定了背景顏色和圖像在元素盒子中繪制的區域。background-origin 和 background-clip 屬性控制這些特性，兩者都可以取下面三個值：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border: 20px double black; background-color: lightgray; background-image: url("imgs/banana.png"); background-size:40px 40px; background-repeat: repeat; background-origin: border-box;} </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃， 65歲的時候終於有錢買25歲的時候熱愛的那條裙子， 又有什么意義。 什么都可以從頭再來， 只有青春不能。 那么多事情， 跟青春綁在一起就是美好， 離開青春， 就是傻冒。 </p> </div> </body> </html>
在此例中，使用了border-box值，也就是說瀏覽器會在邊框下面繪制背景顏色和背景圖像。之所以說“下面”，是因為邊框肯定會繪制在背景上。下圖可以看到其效果。
通過應用裁剪盒子，background-clip 屬性決定了背景的哪一部分是可見的。裁剪盒子之外的部分一律被丟棄，不會顯示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ width: 600px; height:200px; border: 20px double black; background-color: lightgray; background-image: url("imgs/banana.png"); background-size:40px 40px; background-repeat: repeat; background-origin: border-box; background-clip: content-box; } </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃， 65歲的時候終於有錢買25歲的時候熱愛的那條裙子， 又有什么意義。 什么都可以從頭再來， 只有青春不能。 那么多事情， 跟青春綁在一起就是美好， 離開青春， 就是傻冒。 </p> </div> </body> </html>
兩者一起使用，告訴瀏覽器在邊框盒子內部繪制背景，但是丟棄內容盒子之外的部分。
2.6 使用 background 簡寫屬性
使用 background 簡寫屬性可以在一條聲明中設置所有的背景。以下是 background 屬性值的格式，其中包括多個單獨的屬性：
background: <background-color> <background-position> <background-size>
<background-repeat> <background-origin> <background-clip> <background-attachment> <background-image>
這條聲明真夠長，不過其中有些值可以省略。對於省略的值，瀏覽器會用默認值替代。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:10px double black; background: lightgray top right no-repeat border-box content-box local url(imgs/banana.png); } </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。 那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
這條屬性設置等價於同時設置以下屬性：
border:10px double black;
background-color: lightgray;
background-position: top right;
background-repeat: no-repeat;
background-origin: border-box;
background-clip: content-box;
background-attachment: local;
background-image: url(imgs/banana.png);
效果圖如下：
3. 創建盒子陰影
備受開發人員熱切期待的一個CSS3特性是為盒子添加陰影效果。這要通過box-shadow屬性來實現。其元素的值組成如下：
box-shadow: hoffset voffset blur spread color inset
每個值代表的意思如下表所示：
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p{ border:10px double black; width: 500px; height: 180px; box-shadow: 5px 4px 10px 2px red;} </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。 那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> </div> </body> </html>
我們可以在一條 box-shadow 聲明中定義多個陰影，只需要用逗號隔開每條聲明即可：
box-shadow: 5px 4px 10px 2px red, 4px 4px 6px blue inset;
上面的代碼中定義了兩個陰影，其中一個是內部陰影，效果如下圖所示：
4. 應用輪廓
輪廓對於邊框來說是可選的。輪廓最有用的地方在於短時間抓住用戶對某個元素的注意力，如必須按壓的按鈕或者數據輸入中的錯誤。輪廓繪制在盒子輪廓的外面。邊框和輪廓最大的區別是：輪廓不屬於頁面，因此應用輪廓不需要調整頁面布局。
下面代碼展示了對元素應用輪廓。為了說明如何在不重新設置頁面布局的情況下繪制輪廓，這個示例中包含了一個簡單的腳本。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"> p {width: 30%; padding: 1px; border:medium double black; background-color:lightgray; margin: 2px; float: left;} #text {outline:thick solid red;} </style> </head> <body> <div> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。 那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> <p id="text"> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。 那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> <p> 15歲的時候再得到那個5歲的時候熱愛的布娃娃，65歲的時候終於有錢買25歲的時候熱愛的那條裙子，又有什么意義。 什么都可以從頭再來，只有青春不能。 那么多事情，跟青春綁在一起就是美好，離開青春，就是傻冒。 </p> <button>Outline Off</button> <button>Outline On</button> <script> var buttons = document.getElementsByTagName("button"); for (var i = 0;i < buttons.length; i++){ buttons[i].onclick = function(e){ var elem = document.getElementById("text"); if(e.target.innerHTML=="Outline Off"){ elem.style.outline = "none"; }else{ elem.style.outlineColor = "red"; elem.style.outlineStyle = "solid"; elem.style.outlineWidth = "thick"; } } } </script> </div> </body> </html>
效果如下圖所示，顯示了應用輪廓效果。而且輪廓的消失並沒有改變元素的位置，這是因為在頁面布局中沒有為輪廓分配空間。
