這篇文章將為大家詳細講解有關CSS3常用的顏色漸變模式有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為競秀等服務建站，競秀等地企業(yè)，進行企業(yè)商務咨詢服務。為競秀企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

一、線性漸變：linear-gradient

語法：

        = linear-gradient([ [ | to [, ]+)
        = [left | right] || [top | bottom]
         = [ |]?

下述值用來表示漸變的方向，可以使用角度或者關鍵字來設置：

    ：用角度值指定漸變的方向（或角度）。

        to left：設置漸變?yōu)閺挠业阶?。相當? 270deg

        to right：設置漸變從左到右。相當于: 90deg

        to top：設置漸變從下到上。相當于: 0deg

        to bottom：設置漸變從上到下。相當于: 180deg。這是默認值，等同于留空不寫。

    用于指定漸變的起止顏色：

       ：指定顏色。

       ：用長度值指定起止色位置。不允許負值

       ：用百分比指定起止色位置。

示例：

div {  
    width: 200px;  
    height: 100px;  
    margin: 10px 5px;  
    border: 1px solid #ddd000;  
}  
#LinearStartToEnd {  
  float:left;  
  background: linear-gradient(#ff0000, #00ff00);  
}  
#LinearPercentage {  
  float:left;  
  background: linear-gradient(#0000ff, #ff0000 52%, #00ff00);  
}  
#LinearAnglePercentage {  
  float:left;  
  background: linear-gradient(90deg, #ff0000 20%, #00ff00 50%, #000000 80%);  
}  
#LinearAngle {  
  float:left;  
  background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00);  
}  
#LinearTopRight {  
  float:left;  
  background: linear-gradient(to right top, #00ff00, #ff0000 50%, #0000ff);  
}

二、徑向漸變：radial-gradient

語法：

     = [ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]?
     = circle | ellipse
     = |[||]
     = closest-side | closest-corner | farthest-side | farthest-corner
     =
     = [ | ]{2}
     = |
     = radial-gradient([ [ || ] [ at ]? , | at , ]?[[ , ]]+)

       確定圓心的位置。如果提供2個參數(shù)，第一個表示橫坐標，第二個表示縱坐標；如果只提供一個，第二值默認為50%，即center

         ①：用長度值指定徑向漸變圓心的橫坐標值?？梢詾樨撝怠?/p>

         ①：用百分比指定徑向漸變圓心的橫坐標值?？梢詾樨撝?。

         ②：用長度值指定徑向漸變圓心的縱坐標值?？梢詾樨撝怠?/p>

         ②：用百分比指定徑向漸變圓心的縱坐標值?？梢詾樨撝怠?/p>

              center①：設置中間為徑向漸變圓心的橫坐標值。

              center②：設置中間為徑向漸變圓心的縱坐標值。

              left：設置左邊為徑向漸變圓心的橫坐標值。

              right：設置右邊為徑向漸變圓心的橫坐標值。

              top：設置頂部為徑向漸變圓心的縱坐標值。

              bottom：設置底部為徑向漸變圓心的縱坐標值。

       確定圓的類型

              circle：指定圓形的徑向漸變

              ellipse：指定橢圓形的徑向漸變。

       circle | ellipse 都接受該值作為 size。

              closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊。

              closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角。

              farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊。

              farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角。

       circle 接受該值作為 size。

              ：用長度值指定正圓徑向漸變的半徑長度。不允許負值。

       ellipse 接受該值作為 size。

             ：用長度值指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。

             ：用百分比指定橢圓徑向漸變的橫向或縱向半徑長度。不允許負值。

示例：

#RadialCenterCircle {  
  float:left;  
    background: radial-gradient(circle at center, #ff0000, #ffff00, #00ffff);  
}  
#RadialClosestSide {  
  float:left;  
    background: radial-gradient(circle closest-side, #ff0000, #00ff00, #ffff00);  
}  
#RadialFarthestSide {  
  float:left;  
    background: radial-gradient(farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%);  
}  
#RadialRightTop {  
  float:left;  
    background: radial-gradient(at right top, #ff0000, #ffff00, #00ff00);  
}  
#RadialRadiusCenter {  
  float:left;  
    background: radial-gradient(farthest-side at top right, #ff0000, #ffff00, #01fefe);  
}  
#RadialGroup {  
  float:left;  
    background:  
        radial-gradient(farthest-side at top right, #ff0000, #ffff00, #009f00, transparent),  
        radial-gradient(60px at top left, #ff0000, #ffff00, #00ff0e);  
}

三、重復的線性漸變：repeating-linear-gradient

語法和參數(shù)類似線性漸變，這里不在贅述。詳情請參考CSS手冊。

示例：

#RepeatingLinearPercentage{  
  float:left;  
    background: repeating-linear-gradient(#ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearRight {  
  float:left;  
    background: repeating-linear-gradient(to right, #ff0000, #00ff00 10%, #000000 15%);  
}  
#RepeatingLinearAngle {  
  float:left;  
    background: repeating-linear-gradient(45deg, #ff0000, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingLinearBottomLeft {  
  float:left;  
    background: repeating-linear-gradient(to bottom left, #00ffff, #ff0000 10%, #00ff00 15%);  
}

四、重復的徑向漸變：repeating-radial-gradient

語法和參數(shù)類似徑向漸變，這里不在贅述。詳情請參考CSS手冊。

示例：

#RepeatingRadialCircle {  
  float:left;  
    background: repeating-radial-gradient(circle, #ff0000 0, #00ff00 10%, #0000ff 15%);  
}  
#RepeatingRadialTopLeft {  
  float:left;  
    background: repeating-radial-gradient(at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%);  
}  
#RepeatingRadialClosestCorner {  
  float:left;  
    background: repeating-radial-gradient(circle closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%);  
}

完整的例子：