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));