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

boder屬性新特性：

border-radius		設置或檢索對象使用圓角邊框
border-top-left-radius		設置或檢索對象左上角圓角邊框
border-top-right-radius		設置或檢索對象右上角圓角邊框
border-bottom-right-radius		設置或檢索對象右下角圓角邊框
border-bottom-left-radius		設置或檢索對象左下角圓角邊框
box-shadow		設置或檢索對象陰影
border-image		設置或檢索對象的邊框樣式使用圖像來填充
border-image-source		設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑
border-image-slice		設置或檢索對象的邊框背景圖的分割方式
border-image-width		設置或檢索對象的邊框厚度
border-image-outset		設置或檢索對象的邊框背景圖的擴展
border-image-repeat		設置或檢索對象的邊框圖像的平鋪方式

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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-origin		設置或檢索對象的背景圖像顯示的原點
background-clip		檢索或設置對象的背景向外裁剪的區域
background-size		檢索或設置對象的背景圖像的尺寸大小

 

 

 

 

 

 

 

 

 background-size： 背景圖的大小
 [指定寬度高度]
 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
當寫兩個屬性時，分別表示寬度、高度；
 當寫一個屬性時，表示寬度，高度將會等比縮放；

其他屬性值]
 contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部區域)
 cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出區域顯示不全)

 

background-origin

設置或檢索對象的背景圖像計算 <' background-position '> 時的參考原點(位置)。

• 對應的腳本特性為backgroundOrigin。 

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

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

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