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