CSS3背景
CSS3 背景图像区域
background-clip:指定背景绘制区域，共有3种情况：
（1）border-box 背景被裁剪到边框盒
（2）padding-box 背景被裁剪到内边距框
（3）content-box 背景被裁剪到内容框
CSS3 背景图像定位
background-origin：设置元素背景图片的原始起始位置
background-position：定义背景图片位置，两个值：水平和垂直偏移量
CSS3 背景图像大小
background-size：指定背景图片大小，值可以为数值、百分比、cover和contain。
CSS3 多重背景图像
CSS3允许为元素使用多个背景图像。例如：
background-image:url(img.jpg),url(img2.png)
CSS3 背景属性整合
模式：
background:color position size repeat origin attachment image;
CSS3渐变
渐变可以在两个或多个指定的颜色之间显示平稳的过渡
线性渐变
是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）
background:linear-gardient(direction,color-stop1,color-stop2,...)(默认从上到下)
1.线性渐变--从左到右
background:-webkit-linear-gradient(begin-direction,color-stop1,color-stop2,...)
background: -moz-linear-gradient(end-direction,color-stop1,color-stop2,...)
background: -o-linear-gradient(end-direction,color-stop1,color-stop2,...)
background: linear-gradient(to end-direction,color-stop1,color-stop2,...)
2.线性渐变--对角
background:-webkit-linear-gradient(begin-level begin-vertical,color-stop1,color-stop2,...)
background: -moz-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...)
background: -o-linear-gradient(end-level end-vertical,color-stop1,color-stop2,...)
background: linear-gradient(to end-level end-vertical,color-stop1,color-stop2,...)
3.指定角度渐变
background:linear-gradient(angle,color-stop1,color-stop2,...)
4.颜色结点
background:linear-gradient(90deg,red 10%,orange 55%,yellow 100%)
5.重复渐变
background:repeating-linear-gradient(90deg,red 0% blue 20%)
径向渐变(Radial Gradients)
从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）
background:radial-gradient(center,shape,size,start-color,....,last-color);(默认颜色结点均匀分布)
还可以：
1.颜色节点不均匀分布
background:radial-gradient(color-stop1 length|percentage,color-stop2 length|percentage...);
2.设置形状，默认为椭圆形(ellipse)
3.设置尺寸大小，有四个关键字供参考
background:radial-gradient(size,color-stop1,color-stop2,...);
(1)closest-side:最近边
(2)farthest-side:最远边
(3)closest-corner:最近角
(4)closest-corner:最远角
4.重复渐变
background:repeating-radial-gradient(red 0% blue 20%)
