好程式員web開發分享CSS3新增屬性CSS3 背景的新增屬性
1、Background-origin 背景原點
說明：指定background-origin屬性應該是相對位置屬性值：padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的内容框
注：預設值為：padding-box;
2、Background-clip 背景裁切
說明：background-clip 屬性規定背景的繪制區域。屬性值：border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到内邊距框。
content-box 背景被裁剪到内容框
。
注：預設值：border-box;
3、Background-size 背景尺寸
說明：background-size 規定背景圖像的尺寸屬性值：length
規定背景圖的大小。第一個值寬度，第二個值高度。
Percentage(%)
以百分比為值設定背景圖大小
cover
把背景圖像擴充至足夠大，以使背景圖像完全覆寫背景區域
contain
把圖像圖像擴充至最大尺寸，以使其寬度和高度完全适應内容區域。
4、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 顔色特性
1、rgba 顔色模式
2、 Hsl 顔色模式（了解）
3、 Hsla 顔色模式（了解）
CSS3 邊框的新增屬性
1、border-color
EG:border-color:red green #000 yellow;(上右下左)
2、border-image
border-image 屬性是一個簡寫屬性，用于設定以下屬性:
border-image-source 用在邊框的圖檔的路徑。
border-image-slice 圖檔邊框向内偏移。
border-image-repeat 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)
border-image-outset 邊框圖像區域超出邊框的量
3、Border-radius 圓角邊框
(1).box{ border-radius: 5px 10px 20px 50px }
(2).div1{border-radius: 2em/1em}
以斜杠/分開後面的參數:
第一個參數表示圓角的水準半徑，第二個參數表示圓角的垂直半徑
(3).div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
按順時針的順序，斜杠/左邊是四個圓角的水準半徑，右邊是四個圓角的垂直半徑，但是通常我們很少寫右邊的參數，那就是預設右邊等于左邊的值。
4、box-shadow 盒子陰影
屬性值：
Eg:box-shadow: 10px 10px 5px #888888