CSS3新增特性-background以及漸變色

background

1. background:url position no-repeate; //參數1：url鏈接 ；參數2：位置信息，第一個是水平位置可以寫px，也可以寫left/right，第二個是垂直位置 參數3：是否重復(默認重復)

       .box {
           background: url("border.png") 10px bottom no-repeat;
           background-size: 100px 100px;
           background-origin: content-box;
       }

2. 除了第一個參數都可以省略
3. background-size：縮放背景圖片的大小，px或者%（百分比相對於盒子的大小）
4. background-origin：content-box, padding-box,和 border-box區域內可以放置背景圖像。
5. background-clip: border-box|padding-box|content-box;從指定位置開始繪制

漸變色    

1. 線性漸變

   .box {
       background: linear-gradient(to left top,yellow,blue,red);
   }

   參數1：**記得加to（谷歌），方向 上/下/左/右/對角線 ，省略的話默認從上到下；也可以角度，180deg，不用加to   參數二：漸變的顏色，可以寫多個

　　

　　/*重復的線性漸變*/
　　 background: repeating-linear-gradient(red, yellow 10%, green 20%);

1. 徑向漸變

   .box {
       background: radial-gradient(circle, red, yellow, green);
   }

   參數1：定義形狀，默認ellipse（橢圓），circle（圓）  參數2：多個漸變顏色

   /*重復的徑向漸變*/
   .box {
       background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
   }