14CSS3背景与渐变

[目录]

目录

• [目录]
  • 一、CSS3背景
  • 二、CSS3渐变

一、CSS3背景

1. CSS3背景图像区域
   • background-clip属性：指定背景绘制区域
   • 语法：background-clip：border-box|padding-box|content-box;
2. background-origin属性
   • backgroun-origin属性指定background-position属性应该是相对位置
   • 语法：background-origin:padding-box|border-box|content-box
3. CSS背景图像大小
   • background-size属性：指定背景图片大小
   • 语法：background-size:length|percentage|cover|contain
4. CSS3多重背景图像
   • CSS3允许为元素使用多个背景图像
   • 语法：background-image:url(img1.jpg),url(img2.png);
   • 元素引用多个背景图片，前面图片依次覆盖后面图片
5. CSS3背景属性整合
   • 背景缩写属性可以在一个声明中设置所有的背景属性
   • 语法：background:color position size repeat origin clip attachment image;

二、CSS3渐变

1. 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳的过渡

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

1. 线性渐变(Linear Gradients)属性

• 是沿着一根轴线改变颜色，从起点到终点，颜色进行顺序渐变(从一边拉向另一边)

• 语法：background:liner-gradient(direction,color-stop1,colorstop2,...);

• 默认方向是从上到下
  3.线性渐变的其他方向的设置

  //从左到右
  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,...);
  
  //对角
  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(end-level end-vertical,color-stop1,color-stop2,...);

1. 线性渐变的角度设置

• 语法：background:linear-gradient(angle,color-stop1,color-stop2,...);
• 角度说明：角度是指水平线和渐变线之间的角度，逆时针方向计算(0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变，如图所示：(第一个图是标准的，第二个是webkit内核的)

1. 颜色结点
   background:linear-gradient(color1 length|percentage,color2 length|percentage,...);
2. 重复渐变
   background:repeat-linear-gradient(color1 length|percentage,color2 length|percentage,...);
3. CSS3径向渐变

• 径向渐变(Radial Gradients)属性：从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)
• 语法：background:radial-gradient(center,shape,size,start-color,...,last-color)
• 设置形状：background:radial-gradient(shape,color-stop1,color-stop2,...)
• 形状说明：circle——圆形；eclipse——椭圆(默认)如果元素设置高宽值一样，那参数不论设置为eclipse还是circle，显示效果为圆形
• 尺寸大小关键词
  • 语法：background:radial-gradient(size,color-stop1,color-stop2,...);
  • 关键词说明：

  closest-side:最近边
  closest-corner:最近角
  farthest-side:最远边
  farthest-corner:最远角

• 重复渐变
  background:repeating-radial-gradient (color1 length|percentage,color2 length|percentage,...);
• 其它渐变
  Internt Explorer渐变
  语法：filter:progid:DXImageTransform.Microsoft.gradient(startColorst='startColor' endColor='endColor',GradientType=0);