css3圓角、邊界圖片、盒子陰影、背景大小、填充位置、定位位置、背景顏色漸變
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
該屬性是複合屬性，包括：
| 值 | 描述 |
|---|---|
| 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. 背景顏色漸變
（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%)
