1. css3圓角：border-radius
（1）這是個複合屬性：比如：border-radius：10px；
== border-radius：10px 10px 10px 10px;對應的四個角：左上角，右上角，右下角，左下角
== 四個值分別對應：border-top-left-radius: 10px、border-top-right-radius: 10px;、border-bottom-right-radius: 10px;、border-bottom-left-radius: 10px;
這四個分開寫的值也是複合屬性：拿左上角舉例：border-top-left-radius: 50px;
其實是：border-top-left-radius: 50px(x軸) 50px(y軸)；
效果如圖：
（2）如果左上角和右上角的x軸值的和大於了div的上邊，會出現什麼結果？
答：切點會發生偏移，具體的在實例中測試便知
比如：
border-top-left-radius: 50px 50px;
border-top-right-radius: 70px 50px;
2. css3邊界圖片：border-image
詳情：https://segmentfault.com/a/1190000010969367
該屬性是複合屬性，包括：
| 值 | 描述 | |
|---|---|---|
| border-image-source | 用在邊框的圖片的路徑。相對路徑或是絕對路徑 | |
| border-image-slice | 圖片邊框向內偏移。沒有單位，默認單位就是像素(px)。支持百分比值 | |
| border-image-width | 圖片邊框的寬度。 | |
| border-image-outset | 邊框圖像區域超出邊框的量。 | |
| border-image-repeat | 圖像邊框是否應平鋪(repeat)、鋪滿(round)或拉伸(stretch)。默認stretch |
3. css3盒子陰影：border-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 說明 |
|---|---|
| h-shadow | 必需的。水平陰影的偏移量。允許負值 |
| v-shadow | 必需的。垂直陰影的偏移量。允許負值 |
| blur | 可選。模糊距離 |
| spread | 可選。陰影的大小。0px表示原始大小 |
| color | 可選。陰影的顏色。 |
| inset | 可選。從外層的陰影（開始時）改變陰影內側陰影 |
比如：box-shadow: 5px 5px 2px 0px green;
4. background-size
規定背景圖像的尺寸大小
| 值 | 描述 | 測試 |
|---|---|---|
| length |
設置背景圖像的高度和寬度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置爲 "auto"。 |
測試 |
| percentage |
以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置爲 "auto"。 |
測試 |
| cover |
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。 背景圖片的寬填充 |
測試 |
| contain | 把圖像圖像擴展至最大尺寸，背景圖片的高填充 |
5. background-origin
background-origin 屬性規定 background-position 屬性相對於什麼位置來定位。
註釋：如果背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果。
| 值 | 描述 | 測試 |
|---|---|---|
| padding-box | 背景圖像相對於內邊距框來定位。 | 測試 |
| border-box | 背景圖像相對於邊框盒來定位。 | 測試 |
| content-box | 背景圖像相對於內容框來定位。 | 測試 |
6. background-clip
background-clip 屬性規定背景的繪製區域。背景圖片或背景顏色
object.style.backgroundClip="content-box"
| 值 | 描述 | 測試 |
|---|---|---|
| border-box | 背景被裁剪到邊框盒。（默認值） | 測試 |
| padding-box | 背景被裁剪到內邊距框。 | 測試 |
| content-box | 背景被裁剪到內容框。 | 測試 |
7. 背景顏色漸變
具體介紹，以及兼容性：http://www.runoob.com/css3/css3-gradients.html
（1）線性漸變：linear-gradient
1）漸變方向：left top right等、45deg、90deg等兩種方向方式。
2）顏色開始變化和結束變化的設置：百分比，默認起始變化是0%，終止變化是100%。
3）線性漸變 - 透明度：爲了添加透明度，我們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。
4）重複的線性漸變：repeating-linear-gradient() 函數用於重複線性漸變。查看實例
（2）徑向漸變：radial-gradient
background: radial-gradient(center, shape size, start-color, ..., last-color);
1）漸變中心，可選參數，如30px 20px指距離左側30px距離上側20px，可以是像素，可以是百分比，也可以是關鍵字，默認爲中心位置。
2）shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
3）size 參數定義了漸變的大小。它可以是以下四個值：
closest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最近的邊
closest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最近的角
farthest-side：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的邊
farthest-corner：指定徑向漸變的半徑長度爲從圓心到離圓心最遠的角
4）重複的徑向漸變
repeating-radial-gradient() 函數用於重複徑向漸變。實例測試
background: repeating-radial-gradient(red, yellow 10%, green 15%)
