CSS：設定邊框和背景
應用邊框樣式
邊框基本設定
首先簡單介紹一下使用邊框最常用的三個基本屬性：
| 屬性 | 說明 | 值 |
|---|---|---|
| border-width | 設定邊框的寬度 | 度量單位（em、px、cm等） |
| border-color | 設定邊框的顏色 | 英文單詞、HEX、RGBa、HSLa |
| border-style | 設定邊框的樣式 | 參考下方表格 |
CSS提供的邊框樣式比較豐富，下面我將通過表格來進行說明：
| 屬性 | 說明 |
|---|---|
| none | 沒有邊框 |
| dashed | 虛線邊框 |
| dotted | 點線邊框 |
| outset | 外浮雕邊框 |
| inset | 內浮雕邊框 |
| solid | 實現邊框 |
| double | 雙實線邊框 |
| groove | 3D凹槽邊框 |
| ridge | 3D凸槽邊框 |
你也可以單獨為某一條邊框設定樣式，這需要用到特定的屬性，如下所示：
| 屬性 | 說明 | 值 |
|---|---|---|
| boder-top-width/style/color | 定義頂邊 | 跟通用屬性的值一樣 |
| border-bottom-width/style/color | 定義底邊 | 跟通用屬性的值一樣 |
| border-left-width/style/color | 定義左邊 | 跟通用屬性的值一樣 |
| border-right-width/style/color | 定義右邊 | 跟通用屬性的值一樣 |
我們也可以不用分開設定樣式、寬度和顏色，因為這樣看起來太複雜了，我們可以使用簡寫屬性boder一次搞定，下方列表描述了這些屬性：
| 屬性 | 說明 | 值 |
|---|---|---|
| border | 設定所有邊的邊框 | <寬度><樣式><顏色> |
| border-top/left/right/bottom | 設定一條邊的邊框 | <寬度><樣式><顏色> |
<style type 設定圓角邊框
可以使用邊框的radius屬性建立圓角邊框，下方通過表格說明：
| 屬性 | 說明 | 值 |
|---|---|---|
| border-radius | 一次設定四個角的簡寫屬性 | 度量單位px/百分值等 |
| border-top/bottom/left/right-radius | 設定一個圓角 | 度量單位px/百分值等 |
設定元素的背景
首先列出一些背景屬性：
| 屬性 | 說明 |
|---|---|
| background-color | 設定元素的背景顏色，總是顯示在背景影象下面 |
| background-image | 設定元素的背景影象，如果指定一個以上的影象，則後面的影象繪製在前面的影象下面 |
| background-repeat | 設定影象的重複樣式 |
| background-size | 設定背景影象的尺寸 |
| background-position | 設定背景影象的位置 |
| background-attachment | 設定元素中的影象是否固定或隨頁面一起滾動 |
| background-clip | 設定背景影象裁剪方式 |
| background-origin | 設定背景影象繪製的起始位置 |
| background | 簡寫屬性 |
設定背景顏色和影象
設定背景顏色和影象相對比較簡單，這裡就簡單的通過程式碼給大家示範一下如何使用：
<style type="text/css">
div {
border: 2px solid black;
/*設定背景顏色*/
background-color: red;
/*設定背景圖片*/
background-image: url(image.png);
}
</style>
設定背景重複 background-repeat
當一張背景圖片寬或高小於其元素容器，或用“background-size”（後面會講到）設定寬高小於元素容器的寬高時，背景圖片預設會以“平鋪”的方式排滿整個元素的背景，而該屬性正式用於控制影象重複排列方式的，它有以下值：
| 值 | 說明 |
|---|---|
| repeat | 水平和垂直方向同時平鋪影象，影象可能被截斷 |
| repeat-x | 水平方向平鋪影象，影象可能被截斷 |
| repeat-y | 垂直方向平鋪影象，影象可能被截斷 |
| no-repeat | 禁止平鋪影象 |
設定背景影象尺寸 background-size
該屬性用於設定背景圖片的大小，主要可以通過四種類型的單位設定：
| 值 | 說明 |
|---|---|
| 畫素值 | 可以通過畫素“px”精確地設定背景圖片的大小。需要設定為兩個值，第一個值表示背景圖的寬度，第二個值表示背景圖的高度，還可以通過設定寬度或高度的其中一個，將另外一個值設定成“auto”達到保持背景圖原始影象比例的效果。如：“240px 120px”、“180px auto”或“auto（相當於還原預設的大小）”。 |
| 百分比 | 用“百分比”作為值，結構和用“畫素值”一致，也是兩個值，第一個值是相對於元素寬度的百分比值，第二個值是相對於元素高度的百分比。如：“100% 80%”、“100% auto”或“auto 50%”。 |
| contain | 等比例縮放影象，使其寬度、高度中較大者與容器橫向或縱向重合，背景影象始終包含在容器內 |
| cover | 等比例縮放影象，是影象至少覆蓋容易，有可能超出容器 |
| auto | 預設值，影象以本身尺寸完全顯示 |
設定背景影象位置 background-position
瀏覽器使用background-position屬性設定背景影象的位置。影象不平鋪的時候這個屬性用得最多。使用這個屬性主要分為兩類實際情況：第一類情況就是元素的寬高大於背景圖片時，這個時候是通過“0”或“正數值”去進行定位；第二類情況就是元素的寬高小於背景圖片的寬高時，這個時候是通過“0”或“負數值”去進行定位（這是採用“CSS圖片精靈（CSS Sprites）”技術來開發專案的時候必用的屬性）。
方位英文單詞：可以有“left”、“right”、“top”、“bottom”和“center”。用法如：“left top”（預設），設定背景圖在元素內的“左上方”；“right bottom”，設定背景圖在元素內的“右下方”；“center center”，設定背景圖在元素的“中心”。
百分比單位：用法如：“0% 50%”，設定背景圖在元素內“水平方向”的“左方”，垂直方向的“中心”；“50% 50%”,，設定背景圖在元素內的“中心”；“100% 100%”,，設定背景圖在元素內的“右下方”。
畫素單位：背景圖的“左上角”相對於元素“左上角”偏移的距離，如“10px 20px”,設定背景圖“水平向右”偏移10畫素，“垂直向下”偏移20畫素。
這三種形式去設定背景圖片的位置是可以“混搭”的，如：“left 100%”、“50% 70px”、“top 30px”等。不過從程式碼規範性的角度出發，並不推薦這種“混搭”的方式。
設定元素的背景附著方式 background-attachment
為具有視窗的元素應用背景時，可以指定背景附著內容的方式。textarea是常見的居右視窗的元素，可以自動新增滾動條以顯示內容。另一個例子是body元素，如果其中的內容比瀏覽器的視窗長，可以為其設定滾動條，使用background-attachment屬性可以控制背景的附著方式，下方表格中列出了該屬性的可能取值：
| 值 | 說明 |
|---|---|
| fixed | 背景固定到視窗上，即內容滾動時背景不動 |
| local | 背景附著在內容上，即背景隨內容一起滾動 |
| scroll | 背景固定到元素上，不會隨內容一起滾動 |
設定背景影象的開始位置和裁剪樣式
背景的起始點（origin）指定背景顏色和背景影象應用的位置。裁剪樣式決定了背景顏色和影象在元素盒子中繪製的區域。background-origin和background-clip屬性控制著這些特性，兩者都可以取以下三個值：
| 值 | 說明 |
|---|---|
| border-box | 在邊框盒子內部繪製背景顏色和背景影象 |
| padding-box | 在內邊距盒子內部繪製背景顏色和背景影象 |
| content-box | 在內容盒子內部繪製背景顏色和背景影象 |
建立盒子陰影
備受開發人員熱切期待的一個CSS3特性是為元素的盒子新增陰影效果。這要通過box-shadow屬性來實現。box-shadow元素的值組成如下：
box：hoffset voffset blur spread color inset
每個值代表的意思請參考下方列表：
| 值 | 說明 |
|---|---|
| hoffset | 陰影的水平偏移量，是一個長度值，正值代表陰影向右偏移，負值代表陰影向左偏移 |
| voffset | 陰影的垂直偏移量，是一個長度之，正值代表陰影位於元素盒子下方，負值代表陰影位於元素盒子上方 |
| blur | （可選）指定模糊值，是一個長度值，值越大盒子的邊界越模糊。預設值是0，邊界清晰 |
| spread | （可選）指定陰影的延伸半徑，是一個長度值，正值代表陰影像盒子各個方向延伸擴大，負值代表陰影延相反方向縮小 |
| color | （可選）設定陰影的顏色，如果省略，瀏覽器會自行選擇一個顏色 |
| inset | （可選）將外部陰影設定為內部陰影（內嵌到盒子中） |
程式碼示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒子陰影</title>
<style type="text/css">
div {
margin-top: 30px;
}
div span {
border:5px groove black;
padding: 10px;
margin-top: 20px;
box-shadow: 10px 7px 3px 2px gray;
}
</style>
</head>
<body>
<div>
<span>
犯我中華者雖遠必誅
</span>
</div>
</body>
</html>
提示：我們可以再一條box-shadow宣告中定義多個陰影，只需要用逗號分隔每條宣告即可。
應用輪廓
輪廓對於邊框來說是可選的。輪廓最有用的地方在於短時間抓住使用者對某個元素的注意力，如必須按壓的按鈕或者資料輸入中的錯誤。輪廓繪製在盒子邊框的外面。邊框和輪廓最大的區別是：輪廓不屬於頁面，因此應用輪廓不需要調整頁面佈局，下方列表中列出了與輪廓相關的屬性：
| 屬性 | 說明 | 值 |
|---|---|---|
| outline-color | 設定外圍輪廓的顏色 | <顏色> |
| outline-offset | 設定輪廓距離元素邊框邊緣的偏移量 | <長度> |
| outline-style | 設定輪廓樣式 | 跟border-style屬性的值一樣 |
| outline-width | 設定輪廓的寬度 | thin、medium、thick、<長度> |
| outline | 在一條宣告中設定輪廓的簡寫屬性 | <顏色><樣式><寬度> |
程式碼示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>盒子陰影</title>
<style type="text/css">
input {
outline-color: blue;
outline-offset: 0px;
outline-style: dashed;
outline-width: 1px;
}
</style>
</head>
<body>
<form>
<input type="button" name="" value="確定">
</form>
</body>
</html>