CCS3背景与渐变

CSS3背景

背景图像区域

• background-clip属性
  概念：指定背景的绘制区域。
• 属性值

属性值	描述
border-box	从边框开始显示背景图像
padding-box	从内边距开始显示背景图像
content-box	从内容区开始显示背景图像

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

背景图像定位

• background-origin属性
  概念：指定background-position属性的相对位置。
• 属性值

属性值	描述
border-box	偏移的起始位置为边框的左上角顶点
padding-box	偏移的起始位置为内边距的左上角顶点
content-box	偏移的起始位置为内容区的左上角顶点

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

背景图像大小

• background-size属性
  概念：指定背景图片的大小。
• 属性值

属性值	描述
length	具体的数值，如PX 。只写一个值的话，则是设置背景图片的宽度，第二个值为高度默认为auto
percentage	百分数%。只写一个值的话，则是设置背景图片的宽度，第二个值为高度默认为auto
cover	背景图片会将整个区域全部填满，图片有可能会溢出
contain	整个背景图片会全部显示在区域中，区域可能会有空白部分

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

多重背景图像

• background-image属性
  概念：可以为元素设置多个背景图像。
• 语法
  background-image：url(image1.png),url(image2.png); 图片会按顺序层叠，第一张图片在最上面。

背景属性整合
所有背景属性可以缩写在一个background中。

• 语法
  background：color position size repeat origin clip attachment image；顺序不固定，一般按照这个顺序写。

CSS3渐变

• 概念
  渐变可以在两个或多个指定的颜色之间显示平稳的过渡。
• 兼容性

IE	FireFox	Chrome	Safari	Opera
10+	16+	26+	6.1+	12.1+
	3.6 -moz-	10.0 -webkit-	5.1 -webkit-	11.6 -o-

线性渐变

• linear gradient属性
  概念：沿着一根轴改变颜色，从起点到终点颜色进行顺序渐变（默认均匀分布）
• 语法
  background：linear-gradient（ direction color1，color2，…）；
• 从上到下
  background：linear-gradient（ color1，color2，…）；这是从上到下的（默认），但是对于不同的浏览器，direction有不同的区别。
• 从左到右
  direction值为right或left。

兼容前缀	direction值
-webkit-	begin-direction
-moz-	end-direction
-o-	end-direction
无	to end-direction

• 对角
  level为水平方向值为right或left，vertical为竖直方向值为top或bottom。

兼容前缀	direction值
-webkit-	begin-level begin-vertical
-moz-	end-level end-vertical
-o-	end-level end-vertical
无	to end-level end-vertical

线性渐变-使用角度

• 语法
  background：linear-gradient（angle，color1，color2，…）；
• 角度说明
  0度将创建一个从下到上的渐变，90度将创建一个从左到右的渐变，这是默认的。不同的浏览器的0度创建的渐变方向有可能不一样。

线性渐变-颜色节点

• 概念
  可以设置多个颜色按顺序按比例渐变（颜色按照分配的区域比例分布）
• 语法
  background：linear-gradient（color1 length|%，color2 length|%，…）；

线性渐变-重复渐变

• 概念
  可以设置多个颜色按顺序按比例重复渐变
• 语法
  background：repeating-linear-gradient（color1 length|%，color2 length|%，…）；

径向渐变

• 概念
  从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）（默认均匀分布）
• 语法
  background：radial-gradient（center，shape size，color1，color2，…）；
• shape值
  circle 圆
  eclipse 椭圆（默认）

径向渐变-颜色节点

• 概念
  可以设置多个颜色按顺序按比例渐变（颜色按照分配的区域比例分布）
• 语法
  background：radial-gradient（color1 length|%，color2 length|%，…）；

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

• 语法
  background：radial-gradient（size，color1 length|%，color2 length|%，…）；
• 关键字取值
  closest-side 最近边
  closest-corner 最近角
  farthest-side 最远边
  farthest-corner 最远角

径向渐变-重复渐变

• 概念
  可以设置多个颜色按顺序按比例重复渐变
• 语法
  background：repeating-linear-gradient（color1 length|%，color2 length|%，…）；