background

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

除了第一个参数都可以省略
background-size：缩放背景图片的大小，px或者%（百分比相对于盒子的大小）
background-origin：content-box, padding-box,和 border-box区域内可以放置背景图像。
background-clip: border-box|padding-box|content-box;从指定位置开始绘制

渐变色    

线性渐变

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

参数1：**记得加to（谷歌），方向 上/下/左/右/对角线 ，省略的话默认从上到下；也可以角度，180deg，不用加to   参数二：渐变的颜色，可以写多个

　　/*重复的线性渐变*/
　　 background: repeating-linear-gradient(red, yellow 10%, green 20%);

径向渐变

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

参数1：定义形状，默认ellipse（椭圆），circle（圆）  参数2：多个渐变颜色

/*重复的径向渐变*/
.box {
    background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
}