本文共 2142 字，大约阅读时间需要 7 分钟。

背景

背景图像区域：

1、指定背景绘制一个区域

2、Backguround-clip:

1、border-box（背景被裁剪到边框盒） – 默认值

2、Padding-box(背景被裁剪到内边距框)

3、Content-box(背景被裁减到内容框)

背景图像定位

1、background-origin：设置元素背景图像得原始起始位置

2、Background-position:2个值：

水平盒垂直得偏移量

3、概念：指定Background-position属性得相对位置

4、三个属性值：

1、padding-box ：

相对于内边距位置开始得左上角得偏移量 – 默认值

2、Border-box ：

相对于边框位置开始得左上角得偏移量

3、Content-box ：

相对于内容位置开始得左上角得偏移量

背景图像的大小 – background-size

1、指定背景图像的大小

2、语法：length/百分比/cover/contain/auto(默认值) – 一般情况下2 个值：第一个宽度 第二个高度

如果第二个不设置，默认是auto

3、兼容性：ie9+ firefox4+ chrome

safari5+ opera

4、Cover:即将背景图片等比例缩放以填满整个容器

5、Contain:背景图片等比例缩放至另一边紧贴容器边缘为止；

多重背景图像

背景属性的整合：

1、可以在一个声明中设置所有的背景属性

2、语法：background:color position size reapeat origin clip attachment image

Css3 渐变

1、可以在两个或多个指定的颜色之间显示平稳的过渡

2、兼容性：ie10+ chrome 10+ -webkit- firefox 3.6+ -moz- safari6.1+

5.1-webkit- opera 11.6 -o-

线性渐变（linear Gradients）属性

1、沿着一根轴线来改变颜色，从起点到终点颜色进行顺序改变（从一边拉向另一边）

2、语法：background:linear-Gradient(direction方向，color-start开始颜色，color-end结束颜色。。。) — 颜色值可以有多个

默认情况 – 从上往下效果

对于左右而言：

1、chrome begin-direction

2、Firefox end-direction

3、Opera end-direction

4、标准 to end-direction

对角线

1、chrome begin-level

begin-vertical

2、Firefox end-level

end-vertical

3、Opera end-level

end-vertical

4、标准形式 to end-level

end-vertical

线性渐变 – 使用角度

1、语法：background:linear-Gradient(angle角度, color-start开始颜色，color-end结束颜色。。。)

– 标准的渐变的形式

线性渐变 – 重复渐变

1、概念：类似于2个颜色不断的重复出现，呈现出类似斑马线的效果；

2、语法:background:reapeating-linear-Gradient(color-start开始颜色，color-end结束颜色。。。)

Css3径向渐变 – radial gradients属性

1、从起点到终点颜色从内到外进行圆形渐变的过程（从中间向外拉）

2、语法：background:radial-gradient(center,shape

size,star-color,…last-color);

径向渐变 – 颜色结点不均匀分布

1、语法：background:radial-gradient(star-color lenth/%,…last-color

lenth/%);

径向渐变 – 设置形状

1、语法：background:radial-gradient(shape，star-color lenth/%,…last-color lenth/%);

2、Shape：只有2个值：

(1) Circle – 圆形

(2) Ellipse – 椭圆形(默认)

(3) 注意点：如果元素我们设置宽高值一样，那么参数不论设置为ellipse还是circle，显示效果都是圆形；

径向渐变 – 尺寸大小关键字

1、语法：background:radial-gradient(size，star-color lenth/%,…last-color lenth/%);

2、size值：

(1) Closest-side最近边

(2) Farthest-side最远边

(3) Closest-corner最近角

(4) Farthest-corner最远角

重复渐变 – 径向渐变

background:reapeating-radial-Gradient(color-start开始颜色 length/%，color-end结束颜色。。。)

转载地址：http://nbali.baihongyu.com/