CSS自學筆記（11）:CSS3背景和邊框

標籤：style   blog   http   color   使用   os   io   strong   

CSS3 背景

在CSS3中新增了多個關於背景的屬性，可以讓我們對背景有了更多更好的操作，減少用第三方工具對背景圖片進行修改美化。

CSS3中主要是通過定義backgrounp中的各個屬性來控制背景(高寬，位置，透明度…………)。

關於背景的部分常用屬性有(*為CSS3中新增屬性)：

值	描述
background-color	規定要使用的背景顏色。
background-position	規定背景映像的位置。
background-size*	規定背景圖片的尺寸。
background-repeat	規定如何重複背景映像。
background-origin*	規定背景圖片的定位地區。
background-clip*	規定背景的繪製地區。
background-attachment	規定背景映像是否固定或者隨著頁面的其餘部分滾動。
background-image	規定要使用的背景映像。
inherit	規定應該從父元素繼承 background 屬性的設定。
………………………	………………………………

現在主流瀏覽器都支援最新的CSS3關於背景的屬性，所以不用擔心瀏覽器的問題了。。。。。。。

在CSS3之前，如果需要一張圖片來作為背景時，背景的尺寸有圖片的實際尺寸決定。

在CSS3中可以定義背景圖片的尺寸了，這樣我們就可以在不同的元素中使用同一張圖片作為背景圖片。定義背景圖片的尺寸時可以用像素或者百分比數來定義。

* {background:url(1.png);background-size:200px 100px;background-repeat:no-repeat;}

原始圖片為下左圖，使用上面的CSS樣式表定義後，就變成了下右圖

   

所以，我們可以對一張圖片進行展開處理，使其大小適應於所要填充的地區，無需通過其他軟體對圖片做修改，同時也可以使一張圖片作為多個元素的背景圖片。

* {background:url(1.png);background-size:120px 100%;background-repeat:no-repeat;}

在一個盒子內部，我們也可以通過屬性來定義背景圖片的定位地區，定義圖片是邊框背景(content-box)，內邊距背景(padding-box)還是元素內容背景(border-box)。

在CSS3中，我們可以用多張圖片用來作為元素的背景圖片。

*{ background-image:url(1.gif),url(1.png),……;}

除了圖片，我們也可以通過顏色來實現很多背景樣式。

CSS3 邊框

對於邊框的屬性，在CSS3中也新增了不少，例如添加邊框陰影，用圖片來繪製邊框(邊框是有寬度的)，定義圓角邊框等等，也減少了用第三方軟體設計來邊框。

CSS3中新的邊框的部分屬性

屬性	描述
border-image	設定所有 border-image-* 屬性的簡寫屬性。
border-radius	設定所有四個 border-*-radius 屬性的簡寫屬性。
box-shadow	向方框添加一個或多個陰影。

定義一個圓角邊框

*{border:5px solid;border-radius:50px;}

我們也可以為邊框添加陰影製作效果

* {box-shadow: 10px 10px 5px #CF0;}

我們也可以用圖片作為元素的邊框

* {border-image:url(border.png) 25 25 round;border-image:url(border.png) 25 25 stretch;}

背景圖片：

來源：http://www.w3school.com.cn/i/border.png