CSS3背景与渐变

background-clip（指定背景绘制区域）
ackground-clip: border-box / padding-box / content-box;/*没有padding的时候，content-box和padding-box效果一样*/

兼容性：IE9+、FireFox、Chrome、Safari、Opera

二、CSS3 背景图像定位

background-position （背景定位）

background-position: px / % ...;

background-origin（设置元素背景图片的原始起始位置）

background-origin: padding-box|border-box|content-box;

兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

三、CSS3 背景图像大小

background-size（指定背景图片大小）
background-size: px / % / cover / contain;/*cover：把背景图片扩展至足够大，以使背景图片完全覆盖区域（即完全不留白）
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（至少满足一边不留白）*/

兼容性：IE9+、FireFox4+、Chrome、Safari5+、Opera

四、CSS3 多重背景图像

background-image: url(img1.jpg), url(img2.png);/*img1放前面，img2放后面*/

五、CSS3 渐变

线性渐变 - 从上到下（默认）

background: linear-gradient(direction, color-stop1, color-stop2, ...);

兼容性：IE10+、FireFox16+（3.6 –moz-内核）、Chrome26+（10.0 –webkit-）、Safari6.1+（5.1 –>webkit-）、Opera12.1+（11.6 –o-）

线性渐变 - 从左到右

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, ...);/*注意webkit是起始方向*/

线性渐变 – 对角

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, ...);/*注意webkit是起始方向*/

线性渐变 – 自定义角度

background:-webkit-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从左往右
background: -moz-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: -o-linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上
background: linear-gradient(angle, color-stop1, color-stop2, ...); //默认从下往上（优先级高）/*angle单位deg*/

线性渐变 – 颜色结点自定义分布

语法：同上，并在颜色值后加上 “空格+百分比” （透明色：transparent）

线性渐变 – 重复渐变

语法：同上，并在linear前加repeating-

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);/*center默认居中，可不写
center值改为：px / %等可定位圆心位置*/

径向渐变 - 颜色结点均匀分布（默认）

background:-webkit-radial-gradient(color-stop1, color-stop2, ...);
background: -moz-radial-gradient(color-stop1, color-stop2, ...);
background: -o-radial-gradient(color-stop1, color-stop2, ...);
background: radial-gradient(color-stop1, color-stop2, ...);

径向渐变 - 颜色结点自定义分布

语法：与线性同理

径向渐变 – 设置形状

background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(shape, color-stop1, color-stop2, ...);
background: -o-radial-gradient(shape, color-stop1, color-stop2, ...);
background: radial-gradient(shape, color-stop1, color-stop2, ...);/*shape的值：
circle —— 圆形
ellipse —— 椭圆（默认）*/

径向渐变 – 尺寸大小（关键字的使用）

background:-webkit-radial-gradient(size, color-stop1, color-stop2, ...);
background: -moz-radial-gradient(size, color-stop1, color-stop2, ...);
background: -o-radial-gradient(size, color-stop1, color-stop2, ...);
background: radial-gradient(size, color-stop1, color-stop2, ...);/*关键字size说明（相对圆心）
closest-side：最近边
farthest-side：最远边
closest-corner：最近角
farthest-corner：最远角*/

径向渐变 – 重复渐变

语法：与线性同理

IE低版本浏览器的渐变

filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);

综合案例：