background的css3新属性

background-clip 指定背景绘制区域

属性值：

1. border-box绘制边框以内的区域
2. padding-box 绘制内边距以内的区域
3. centent-box 仅绘制内容区域

background-origin 背景的起始定位

属性值：

1. border-box 从border的左上角开始定位
2. padding-box 从padding的左上角开始定位
3. content-box 从内容区的左上角开始定位

background-size 背景图片的大小

属性值：

1. 可以是具体的数值也可以是百分比（如果只有一个数值，图片则按比例缩放）
2. cover 按图片自身比例填充满整个div （可能会有部分溢出 当attachment值为scroll时缩放页面可能会导致页面部分空白）
3. contain 显示整张背景图 （如果不设置repeat可能会导致部分空白）

多重背景图片

background-image：url(’…jpg’),url(’…’)； 可添加多张背景，背景图之间用逗号隔开 前一张会覆盖后一张

background简写：

background：color position size repeat origin clip attachment image
但是考虑到兼容性问题 css3属性还是单独写比较好

渐变

属性值：

1. 线性渐变
   写法：
   background：
   -webkit-linear-gradient（开始的方向，渐变颜色1，渐变颜色2，…可多个）webkit的内核
   -moz-linear-gradient(结束的方向，渐变颜色1，渐变颜色2，…)新版本的火狐是开始的方向
   -o-linear-gradient(结束的方向，同上)
   linear-gradient(to-结束方向，同上)标准写法

使用角度：
第一个值可以使用角度，且不需要区分兼容性
角度说明：0deg是一个从下到上的渐变 接下来的值为逆时针方向
控制各颜色值范围
写法：
background：linear-gradient（90deg, red 10%,yellow 20%,blue 20%);
第一个值不写参数默认为0% 最后一个参数不写默认为100%

透明色的渐变：使用rbga
background：linear-gradient（90deg, rgba(255,0,0,0),rgba(255,0,0,1));

2. 径向渐变 从中心到外渐变
   background：radial-gradient 用法与线向差不多 除起点是中心点

设置渐变的形状
值有：circle 圆形
ellipse 椭圆 默认 (如果元素宽高一致的情况下，不论设置什么形状都显示为圆形)

写法：background：（兼容写法省略与标准一致）radial-gradient(circle,red,blue)

改变尺寸大小
属性值：
closest-side：最近边 （距元素的）
farthest-side：最远边
closest-corner：最近角
farther-corner：最远角
写法：background：（兼容省略）radial-gradient(start/end,size shape,red,blue)
注：形状和大小为同一个参数 不可用逗号分开