01-渐变

渐变

渐变是一种有规律性的变化。渐变能给人很强的节奏感和审美情趣。这种形式在日常生活中随处可见，是一种常见的视觉形象。

在css 3中渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

• css 3中渐变主要分为：

  • 线性渐变
  • 径向渐变

  其他的渐变含有重复渐变，是在线性渐变与径向渐变的基础上实现的。

线性渐变

• 性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。
• 渐变线由包含渐变图形的容器的中心点和一个角度来定义的。
• 起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。
• 终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义。
• 中间点是两者之间的可选的点（中间点可以有多个）。

线性渐变语法

• 浏览器兼容问题

  • 老版本浏览器可以通过添加-prefix前缀进行兼容

  -prefix-linear-gradient(<angle>| <side-or-corner>,<coler-stop>,<color-stop>)
  

  • 更具不同的引擎也有不同的前缀

    • Webkit引擎的浏览器（Chrome、safari、Opera）

    -webkit-linear-gradient(<angle>| <side-or-corner>,<coler-stop>,<color-stop>)
    

    • Gecko引擎的浏览器（Firefox）

    -moz-linear-gradient(<angle>| <side-or-corner>,<coler-stop>,<color-stop>)
    

    • Trident引擎的浏览器(IE 10+)

    -ms-moz-linear-gradient(<angle>| <side-or-corner>,<coler-stop>,<color-stop>)
    

    • Presto引擎的浏览器(Opera)

    -o-moz-linear-gradient(<angle>| <side-or-corner>,<coler-stop>,<color-stop>)
    

• 语法：linear-gradient(angle,color-stop,color-stop)

  • angle:表示线性渐变的基准线角度，单位为deg
  • color-stop :渐变颜色以及位置

  html

  <div></div>
  

  css

      div{
          width: 100px;
          height: 100px;
          background: linear-gradient(red,blue);
      }
  

  默认是重上到下的，但是可以通过angle属性来规定角度，可以实现任何角度的渐变

css

    div{
        width: 100px;
        height: 100px;
        background: linear-gradient(30deg,red,blue);
    }

• 语法：linear-gradient(side-or-corner,color-stop,color-stop)

  • side-or-corner 通过关键字方式定义线性渐变的基准线的方向

    • 主要有水平方向 left、reight
    • 垂直方向top、bottom
    • to 关键字 - 表示这个方向的终点

    注意：两个关键字与顺序无关，关键字是可选的

  css

      div{
          width: 100px;
          height: 100px;
          background: -webkit-linear-gradient(left,red,blue);
      }
  	这个可以有多个关键字
  	background: -webkit-linear-gradient(left,top，red,blue);
  

css

div{
    width: 100px;
    height: 100px;
    background: linear-gradient(to left,red,blue);
}

• 语法：linear-gradient(angle,color-stop,color-stop，color-stop) 三个颜色的渐变

  • color-stop 可以设置渐变位置，如果不设置浏览器会给他默认位置

  不设置位置

   div{
      width: 100px;
      height: 100px;
      background: linear-gradient(0deg,red,blue,yellow);
  }
  
  

  设置位置 颜色值范围 0~100% 或 一个长度单位

  div{
      width: 100px;
      height: 100px;
      background: linear-gradient(0deg,red,blue 20%,yellow);
      或
      background: linear-gradient(0deg,red,blue 25px,yellow);
  }
  

• 语法：linear-gradient(angle,color-stop,color-stop，color-stop) 三个颜色的渐变

  • color-stop 可以使用rgba()方式添加颜色的透明度

   background: linear-gradient(0deg,rgba(225,225,225),rgba(200,253,65));
  

lor-stop,color-stop，color-stop)` 三个颜色的渐变

• color-stop 可以使用rgba()方式添加颜色的透明度

 background: linear-gradient(0deg,rgba(225,225,225),rgba(200,253,65));