HTML5權威指南筆記：19-使用邊框和背景

1 應用邊框樣式

關鍵屬性：border - width 、border-style、border-color
例子：定義簡單的邊框

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

1.1 定義邊框寬度

border-width屬性的取值：

1. ＜長度值＞：將邊框寬度值設爲以css度量單位（ 如em 、px 、cm ) 表達的長度值。
2. ＜百分數＞：將邊框寬度值設爲邊框繪製區域的寬度的百分數。
3. Thin、medium、thick：將邊框寬度設爲預設寬度，這三個值的具體意義是由瀏覽器定義的，不過，所有瀏覽器中這三個值代表的寬度依次增大。

1.2 定義邊框樣式

border-style屬性的取值：

1. none：沒有邊框。
2. dashed：破折線式邊框
3. dotted：圓點線式邊框
4. double：雙線式邊框
5. groove：槽線式邊框
6. inset： 使元素內容具有內嵌效果的邊框
7. outset： 使元素內容具有外凸效果的邊框
8. ridge： 脊線邊框
9. solid： 實線邊框

1.3 爲一條邊應用邊框樣式

定義頂邊：
border-top-width
border-top-style
border-top-color
定義底邊：
border-bottom-width
border-bottom-style
border-bottom-color
定義左邊：
border-left-width
border-left-style
border-left-color
定義右邊：
border-right-width
border-right-style
border-right-color

1.4 使用border簡寫屬性

設置所有邊的邊框：

border:＜寬度＞＜樣式＞＜顏色＞

設置一條邊的邊框：

border-top:＜寬度＞＜樣式＞＜顏色＞
border-bottom:＜寬度＞＜樣式＞＜顏色＞
border-left:＜寬度＞＜樣式＞＜顏色＞
bottom-right:＜寬度＞＜樣式＞＜顏色＞

1.5 創建圓角邊框

使用邊框的radius特性創建圓角邊框

屬性	說明	值
border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius	設置一個圓角	一對長度值或百分數值，百分數跟邊框盒子的寬度和高度相關
border-radius	一次設置四個角的簡寫屬性	一對或四對長度值或百分數值，由/字符分割

例子：創建一個圓角邊框

/*第一個值指定水平曲線半徑，第二個值指定垂直曲線半徑。
如果只提供一個值，那麼水平半徑和垂直半徑都是這個值*/
border-top-left-radius: 20px 15px;

例子：使用border-radius簡寫屬性設置4個圓角

/*只指定了兩個值，這一對值會應用到邊框的四個角上，用/字符將水平半徑和垂直半徑隔*/
border-radius: 20px / 15px;
/*設置了8個值，分別是水平的4個角的半徑和垂直的4個角半徑*/
border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%

1.6 將圖像用做邊框

可以使用border-image屬性爲元素創建真正的自定義邊框

屬性	說明	值
border-image-source	設置圖像來源	none或者url(< 圖像＞）
border-image-slice	設置切分圖像的偏移	1~4個長度值或者百分數，受圖像的寬度和高度影響
border-image-width	設置圖像邊框的寬度	auto或1~4個長度值或者百分數
border-image-outset	指定邊框圖像向外擴展的部分	1~4個長度值或者百分數
border-image-repeat	設置圖像填充邊框區域的模式	stretch 、repeat和round中的一個或兩個值
border-image	在一條聲明中設置所有值的簡寫屬性	跟單個屬性的值一樣

border- image- repeat樣式的值

1. stretch：拉伸切分圖填滿整個空間，默認值。
2. repeat：平鋪切分圖填滿整個空間（可能導致圖片被截斷）。
3. round：在不截斷切分圖的情況下，平鋪切分圖並拉伸以填滿整個空間。
4. space：在不截斷切分圖的情況下，平鋪切分圖並在圖片之間保留一定的間距以填滿整個空間。

例子：控制切分圖的重複樣式

/*-moz-是瀏覽器廠商特定前綴
切分值和寬度之間用/分開*/
-moz-border-image: url(bordergrid.png) 30 / 50px round repeat;

2 設置元素的背景

背景屬性：
1. background-color：設置元素的背景顏色， 總是顯示在背景圖像下面
2. background-image：繪製在前面的圖像下面
3. background-repeat：設置圖像的重複樣式
4. background-size：設置背景圖像的尺寸
5. background-position：設置背景圖像的位置
6. background-attachment：設置元素中的圖像是否固定或隨頁面一起滾動
7. background-clip：設置背景圖像裁剪方式
8. background-origin：設置背景圖像繪製的起始位置
9. background：簡寫屬性

2.1 設置背景顏色和圖像

例子：

background-color: lightgray;
background-image: url(banana.png);
background-size: 40px 40px;
background-repeat: repeat-x;

background-repeat屬性的值：

1. repeat-x：水平方向平鋪圖像，圖像可能被截斷。
2. repeat-y：垂直方向平鋪圖像，圖像可能被截斷。
3. repeat：水平和垂直方向同時平鋪圖像，圖像可能被截斷。
4. space：水平或者垂直方向平鋪圖像，但在圖像與圖像之間設置統一間距，確保圖像不被截斷。
5. round：水平或者垂直方向平鋪圖像，但調整圖像大小，確保圖像不被截斷。
6. no-repeat：禁止平鋪圖像。

2.2 設置背景圖像的尺寸

background-size屬性的值：

background-size:contain;

background-size屬性的值：
1. contain：等比例縮放圖像，使其寬度、高度中較大者與容器橫向或縱向重合，背景圖像始終包含在容器內。
2. cover：等比例縮放圖像，使圖像至少覆蓋容器， 有可能超出容器。
3. auto：默認值，圖像以本身尺寸完全顯示。

2.3 設置背景圖像位置

例子：

/*
第一個值控制垂直位置，可以是top 、bottom和center,第二個值控制水平位置，可以是left、right和center*/
background-position: 30px 10px;

background-position屬性的值：
1. top：將背景圖像定位到盒子頂部邊界
2. left：將背烘圖像定位到盒子左邊界
3. right：將背景圖像定位到盒子右邊界
4. bottom：將背景圖像定位到盒子底部邊界
5. center：將背景圖像定位到中間位置

2.4 設置元素的背景附着方式

例子：

background-attachment: scroll;

background - attachment屬性的值
1. fixed：背景固定到視窗上，即內容滾動時背景不動
2. local：背景附着到內容上，即背景隨內容一起滾動
3. scroll：背景固定到元素上， 不會隨內容一起滾動

2.5 設置背景圖像的開始位置和裁剪樣式

/*兩者一起使用，告訴瀏覽器在邊框盒子內部繪製背景，但是丟棄內容盒子之外的部分*/
background-origin: border-box;
background-clip: content-box;

background-origin和background-clip屬性的值：
border-box：在邊框盒子內部繪製背景顏色和背景圖像
padding-box：在內邊距盒子內部繪製背景顏色和背景圖像
content-box：在內容盒子內部繪製背景顏色和背景圖像

2.6 使用background簡寫屬性

background: <background-color> <background-position> <background-size>
<background-repeat> <background-origin> <background-clip> <background-attachment><background-image>

3 創建盒子陰影

box-shadow屬性實現陰影效果
box-shadow屬性的值：

hoffset：陰影的水平偏移址，是一個長度值，正值代表陰影向右偏移，負值代表陰影向左偏移。
voffset：陰影的垂直偏移址，是一個長度值，正值代表陰影位於元素盒子下方，負值代表陰影位於元素盒子上方。
blur：（可選）指定模糊值，是一個長度值，值越大盒子的邊界越模糊。默認值爲0. 邊界清晰。
spread：（可選）指定陰影的延伸半徑，是一個長度值，正值代表陰影向盒子各個方向延伸擴大，負值代表陰影沿相反方向縮小。
color：（可選）設置陰影的顏色，如果省略，瀏覽器會自行選擇一個顏色。
inset：（可選） 將外部陰影設置爲內部陰影（內嵌到盒子中）

例子：

/*爲一個元素應用陰影*/
box-shadow: 5px 4px 10px 2px gray;
/*爲一個元素應用多個陰影,用,分開*/
box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;

4 應用輪廓

outline輪廓屬性：

屬性	說明	值
outline-color	設置外圍輪廓的顏色	＜顏色＞
outline-offset	設置輪廓距離元素邊框邊緣的偏移量	＜長度＞
outline-style	設置輪廓樣式	跟border-style屬性的值一樣
outline-width	設置輪廓的寬度	thin 、medium 、thick 、＜長度＞
outline	在一條聲明中設置輪廓的簡寫屬性	＜顏色＞＜樣式＞＜寬度＞

例子：

outline: thick solid red;