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

創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,長垣網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:長垣等地區(qū)。長垣做網(wǎng)站價格咨詢:13518219792

一、線性漸變：linear-gradient

語法：

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

下述值用來表示漸變的方向，可以使用角度或者關(guān)鍵字來設(shè)置：

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

        to left：設(shè)置漸變?yōu)閺挠业阶?。相?dāng)于: 270deg

        to right：設(shè)置漸變從左到右。相當(dāng)于: 90deg

        to top：設(shè)置漸變從下到上。相當(dāng)于: 0deg

        to bottom：設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫。

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

       ：指定顏色。

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

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

示例：

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ù)，第一個表示橫坐標(biāo)，第二個表示縱坐標(biāo)；如果只提供一個，第二值默認(rèn)為50%，即center

         ①：用長度值指定徑向漸變圓心的橫坐標(biāo)值。可以為負(fù)值。

         ①：用百分比指定徑向漸變圓心的橫坐標(biāo)值?？梢詾樨?fù)值。

         ②：用長度值指定徑向漸變圓心的縱坐標(biāo)值?？梢詾樨?fù)值。

         ②：用百分比指定徑向漸變圓心的縱坐標(biāo)值?？梢詾樨?fù)值。

              center①：設(shè)置中間為徑向漸變圓心的橫坐標(biāo)值。

              center②：設(shè)置中間為徑向漸變圓心的縱坐標(biāo)值。

              left：設(shè)置左邊為徑向漸變圓心的橫坐標(biāo)值。

              right：設(shè)置右邊為徑向漸變圓心的橫坐標(biāo)值。

              top：設(shè)置頂部為徑向漸變圓心的縱坐標(biāo)值。

              bottom：設(shè)置底部為徑向漸變圓心的縱坐標(biāo)值。

       確定圓的類型

              circle：指定圓形的徑向漸變

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

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

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

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

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

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

       circle 接受該值作為 size。

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

       ellipse 接受該值作為 size。

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

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

示例：

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

三、重復(fù)的線性漸變：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%);  
}

四、重復(fù)的徑向漸變：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%);  
}

完整的例子：