boder屬性新特性：

border-image：設置或檢索對象的邊框樣式使用圖像來填充

<‘ border-image-source ‘>：設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。

<‘ border-image-slice ‘>：設置或檢索對象的邊框背景圖的分割方式。

<‘ border-image-width ‘>：設置或檢索對象的邊框厚度。

<‘ border-image-outset ‘>：設置或檢索對象的邊框背景圖的擴展。

<‘ border-image-repeat ‘>：設置或檢索對象的邊框圖像的平鋪方式。

[border-radius 圓角]

* 1、border-radius可以接收8個屬性值,分別表示：

* X軸(左上、右上、右下、左下角)/Y軸(左上、右上、右下、左下角

* eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px

* 2、縮寫形式：

* 只寫X軸，Y軸將默認等於X軸；

* 四個角寫不全，默認對角相等；

* 只寫一個值，默認8個數均等；

* eg: border-radius:50px 20px;

* = border-radius:50px 20px 50px 20px;

* = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;

* 3、當圓角弧度>=正方形邊長一半，將會顯示為圓形。

[border-image 圖片邊框]

* 1、border-image:一共可以放10個屬性值：

* ① 圖片的路徑： url();

*

* ② 圖片的切片寬度： 4個值，分別代表上、右、下、左四條邊；

* 通過4條切線切割，可以將圖片分為9宮格。 9宮格四個角分別對應邊框的四個角(不會進行任何拉伸)，9宮格四個邊分別對應四條邊框(會根據設置進行拉伸/鋪完/重復等操作)

* 註意：寫的時候，必須不能帶px單位！！！！

*

* ③ 邊框的寬度： 4個值，分別代表上、右、下、左四條邊框的寬度；

* 註意：寫的時候，必須帶px單位，與切片寬度用/分隔！！！

*

* ④ 邊框的重復方式： stretch(拉伸)、round(鋪滿)、repeat(重復)

* [round和repeat的區別]

* round: 會對四條邊進行適當的拉伸壓縮，確保四條邊可以重復整數次；

* repeat：會保持每條邊的長度比例不變，可能導致四角處，無法顯示一條完整的邊；

* 2、屬性值寫法： border-image: ① ②/③px ④;

*

* 3、 border-image在webkit內核的瀏覽器中，必須帶-webkit-前綴。

[box-shadow 盒子陰影]

* 1、 6個屬性值，空格分隔：

* ① x軸陰影距離(必選): 可正可負，正——右移，負——左移；

* ② y軸陰影距離(必選): 可正可負，正——下移，負——上移；

* ③ 陰影模糊半徑(可選)：只能為正，默認為0.數值越大，陰影越模糊；

* ④ 陰影擴展半徑(可選)：可正可負，默認為0.數值增大，陰影擴大；數值減小，陰影縮小；

* ⑤ 陰影顏色(可選)：默認為黑色

* ⑥ 內外陰影(可選)：默認為外陰影。 inset表示內陰影；

background新增屬性

background-size： 背景圖的大小
* [指定寬度高度]
寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
當寫兩個屬性時，分別表示寬度、高度；
* 當寫一個屬性時，表示寬度，高度將會等比縮放；
* [其他屬性值]
contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部區域)
cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出區域顯示不全)
*
*

background-origin

• 對應的腳本特性為backgroundOrigin。

padding-box：從padding區域（含padding）開始顯示背景圖像

border-box：從border區域（含border）開始顯示背景圖像。

content-box：從content區域開始顯示背景圖像。

ccs3新特性---（border，Background部分）