HTML5培訓課件：CSS3新增屬性拿走不謝

　　CSS3 背景的新增屬性

　　一、Background-origin 背景原點

　　說明：指定background-origin屬性應該是相對位置屬性值：padding-box 背景圖像填充框的相對位置

　　border-box 背景圖像邊界框的相對位置

　　content-box 背景圖像的相對位置的內容框

　　注：默認值爲：padding-box;

　　二、Background-clip 背景裁切

　　說明：background-clip 屬性規定背景的繪製區域。屬性值：border-box 背景被裁剪到邊框盒。

　　padding-box 背景被裁剪到內邊距框。

　　content-box 背景被裁剪到內容框

　　。

　　注：默認值：border-box;

　　三、Background-size 背景尺寸

　　說明：background-size 規定背景圖像的尺寸屬性值：length

　　規定背景圖的大小。第一個值寬度，第二個值高度。

　　Percentage(%)

　　以百分比爲值設置背景圖大小

　　cover

　　把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域

　　contain

　　把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

　　四、css3多背景屬性

　　Eg:p{ background:url(demo.gif) no-repeat; //這是寫給不識別下面這句的默認背景圖片

　　background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //這是高級瀏覽器的css多重背景，第一個最上面

　　background-color:yellow; //這是定義的默認背景顏色，所有適合 }

　　CSS3 顏色特性

　　一、rgba 顏色模式

　　二、 Hsl 顏色模式(瞭解)

　　三、 Hsla 顏色模式(瞭解)

　　CSS3 邊框的新增屬性

　　一、border-color

　　EG:border-color:red green #000 yellow;(上右下左)

　　二、border-image

　　border-image 屬性是一個簡寫屬性，用於設置如下屬性:

　　border-image-source 用在邊框的圖片的路徑。

　　border-image-slice 圖片邊框向內偏移。

　　border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)

　　border-image-outset 邊框圖像區域超出邊框的量

　　三、Border-radius 圓角邊框

　　(1).box{ border-radius: 5px 10px 20px 50px }

　　#FormatImgID_0#

　　

　　(2).div1{border-radius: 2em/1em}

　　#FormatImgID_1#

　　

　　以斜槓/分開後面的參數:

　　第一個參數表示圓角的水平半徑，第二個參數表示圓角的垂直半徑

　　(3).div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px }

　　#FormatImgID_2#

　　

　　按順時針的順序，斜槓/左邊是四個圓角的水平半徑，右邊是四個圓角的垂直半徑，可是一般咱們不多寫右邊的參數，那就是默認右邊等於左邊的值。

　　四、box-shadow 盒子陰影

　　屬性值：

　　

　　Eg:box-shadow: 10px 10px 5px #888888