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%);
   }