1.與背景相關的新增屬性

   1）指定背景的顯示範圍——background-clip屬性

         屬性值：padding：表示顯示範圍不包括邊框在內；

                       border：表示背景的顯示範圍包括邊框在內；

   2）指定背景影象的繪製起點——background-origin屬性

        屬性值：border：繪製起點為邊框左上角；

                      padding：內部補白區域左上角；

                      content：內容的左上角

div{    
    width: 300px;
    height: 200px;    
    background-color: black;        
    background-image: url(flower-green.png);        
    background-repeat: no-repeat;        
    border: dashed 15px green;        
    padding: 30px;   
    color:white;
    font-size:2em;
    font-weight:bold;
    
}
div.div1{     
       /* 顯示範圍    */ 
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    /* 繪製起點        */
    -moz-background-origin: border;
    -webkit-background-origin: border; 
}
 

   3）指定背景影象的尺寸——background-size屬性

       background-size:寬度  高度；

      ①維持縱橫比： background-size:auto 20px;

      ② 只設置一個引數：background-size:20px; 表示寬度為20px，auto作為高度值進行處理；

      ③ 指定為contain關鍵字：原始影象維持縱橫比自動放大或縮小，使得原影象事物寬度或寬度與元素的高度或寬度完全相等；

      ④ 指定為cover關鍵字：原始影象維持縱橫比，自動放大或縮小填滿元素大小，比例不一致的話，就直接把多餘的部分去掉；

div{
	    width: 300px;
	    height: 200px;
        background-color: black;
        background-image: url(flower-green.png);
        padding: 30px;
        color:white;
        font-size:2em;
        font-weight:bold;
        /* 設定具體尺寸 */
        background-size: 40px 20px;
        /* 設定百分比 */
        background-size:50% 50%;
        /* contain關鍵字 */
        background-size:contain;
        /* cover關鍵字 */
        background-size:cover;
        background-repeat: no-repeat;

}
 

    設定具體尺寸                                                                      設定百分比

    contain關鍵字                                                                  cover關鍵字

   4）用於平鋪背景影象選項——background-repeat屬性

       ① no-repeat、repeat、repeat-x、repeat-y

       ② space：該屬性值在水平方向或垂直方向平鋪背景影象時並不裁剪掉影象超出背景的部分，也不會調整背景影象的尺寸，

而是自動調整影象與影象之間的間距；

      ③ round：在水平方向或垂直方向平鋪背景影象時不會裁剪掉影象超出背景部分，而是自動調整背景影象的尺寸；

div{
    width:300px;
    height:300px;
    border:1px solid blue;
    background-image: url(sheep.png);
    /* space選項平鋪 */
    background-repeat: space;
    /* round選項平鋪 */
    background-repeat: round;
   
}

                                 space選項平鋪                                                                      round選項平鋪

  5）在一個元素中顯示多個背景影象——background-image屬性

     在CSS3中，通過利用逗號作為分隔符來同時指定多個屬性的方法，可以指定多個背景影象；

    通過background-image屬性指定影象檔案的時候，瀏覽器背景的顯示順序是從上往下指定的，第一個指定的影象檔案放在最上面，最後指定的檔案是放在最下面的；

div{
        background-image:url(flower-red.png), url(flower-green.png),url(sky.jpg);
        background-repeat: no-repeat, repeat-x, no-repeat; 
        background-position: 3% 98%,85%, center center,  top;        
        width: 300px;        
        padding: 90px 0px; 
}

  6）使用漸變色背景

       ①繪製線性漸變

          background:linear-gradient(to bottom,orange,black);

         使用Linear-gradient函式實現線性漸變，有三個引數，第一個引數是起點顏色，第三個引數是終點顏色

         第一個引數有多個引數值如下：

           （1）to bottom：從上往下漸變；

           （2）to bottom right：從左上往右下漸變；

           （3）to right：從左往右；      to up right：從左下往右上；

           （4）to up ：從下往上         to up left：從右下往左上；

           （5）to left：從右往左     to bottom left ：從右上往左下漸變；

   第一個引數可以是一個角度：

          background:linear-gradient(30deg,orange,black);

  可以在起點色或終點色後邊指定離漸變色起點或漸變色終點的偏離位置；

       background:linear-gradient(to bottom,orange 20%,black 70%);

  新增多個漸變的中間點

      background:linear-gradient(to bottom,orange 0%,red 20%,yellow 50%,green 75%,black 100%);     

div{
    width:300px;
    height:300px;
    background: linear-gradient(60deg,orange 0%,red 25%,yellow 50%,green 75%,black 100%);  
}

        ② 繪製放射性漸變

            background:radial-gradient(orange,black);   漸變起點色和漸變終點色；

  1）漸變的擴散方式：

      circle：圓形 （預設）      ellipse:橢圓

     background:radial-gradient(circle,orange,black);

  2）在哪個位置擴散

    center center ；left top ；center top ；right top ；right bottom ；right center ；center bottom ； left bottom   座標值（20，30）

    background:radial-gradient(circle at center top,orange,black);

  3）漸變的尺寸

     ① closest-side(漸變到離起點最近的一條邊)    farthest-side 

     ② closest-corner(漸變到起點最近的一個角)    farthest-coner

        background:radial-gradient(circle farther-side at center top,orange,black);

     ③ 指定圓形的半徑指定尺寸；

      background:radial-gradient(circle 95px at center top,orange,black);

     ④ 指定橢圓橫縱向半徑指定漸變尺寸；

     background:radial-gradient(ellipse 235px 95px at center top,orange,black);

4） 新增多個漸變色並指定偏離的百分比，在漸變起點與漸變終點中新增多個漸變中間點；

       background:radial-gradient(circle 95px at center top,orange 0%,red 20%,yellow 50%,green 75%,black 100%);

div{
    width:400px;
    height:200px;
    background:radial-gradient(circle 180px at 80px 50px,orange 0%,red 25%,yellow 50%,green 75%,black);
}

 2.邊框

    1）圓角邊框

         border-radius屬性指定好圓角的半徑，就可以繪製圓角邊框了；

         ① 一個引數時，四個角的圓角半徑都一樣；

         ② 兩個引數時，第一個表示左上角和右下角的圓角半徑；第二個引數表示右上角和左下角的圓半徑；

         ③ 繪製四個角不同半徑的圓角邊框：

            border-top-left-radius； border-top-right-radius；border-bottom-left-radius；border-bottom-right-radius

div{
        border: solid 5px blue;
        /* 一個引數時 */
        border-radius: 20px;
        /* 兩個引數時 */
        border-radius: 40px 20px;
        /* 指定四個不同樣式時 */
        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 40px;
        background-color: skyblue;        
        padding: 20px;
        width: 180px;
}

           一個引數時                                          兩個引數時                                         四個圓角分別指定時

    2）影象邊框

   border-image屬性會讓瀏覽器在顯示影象邊框時，自動將所使用的影象分割為9部分進行處理；

      ① border-image（影象檔案路徑）A B C D /border-width topbottom leftright

A B C D這四個引數表示當瀏覽器自動把邊框所使用到的影象進行分割時的上、右、下、左邊距。

border-width：指定邊框的寬度；（如果四條邊框的引數完全相同，可以只寫一個引數，否則全寫）

topbottom：表示元素的上下兩條邊中影象的顯示方法；（火狐瀏覽器才看得到效果）

leftright：表示元素的左右兩條邊中影象的顯示方法；（火狐瀏覽器才看得到效果）

    顯示方式有三種：repeat   stretch    round 

div{
	/* 四條邊中的顯示方式的屬性只有火狐支援，分割和邊框如果引數都一樣，則可以只寫一個 */
        border-image: url(borderimage.png) 10/5px repeat stretch;
        width:300px;
        height:200px;
}