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

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