在用CSS實現等效中，經常會用到漸變，所以，本篇就研究一下漸變的特性；

在CSS中，漸變并不是作為CSS中的一個屬性來實現的，而是作為一個函數來實現的；它可用作image屬性的值，所以，漸變應用在所有接受圖像的屬性上，比如background-image；而又由于background-image可以接受多組值，所以可以用background-image和漸變實現豐富的效果；

一.漸變的定義

1. 使用范圍：

1. 漸變在一個擁有尺寸的盒子中被生成，被稱之為漸變盒，但是漸變本身并沒有內在的尺寸，也就說如果在一個沒有尺寸的容器上定義漸變，將無法被呈現；
2. 漸變可以應用在所有接受圖像的屬性上；

2. 語法定義

目前，在CSS中支持2種漸變：

1. 線性漸變；
2. 徑向漸變；

每種漸變都有非重復漸變和重復漸變函數；它們的語法規則如下：

1. 線性漸變：linear-gradient()

   <linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>    ] ,]? <color-stop>[, <color-stop>]+)
   <side-or-corner> = [left | right] || [top | bottom]
   <color-stop> = <color> [ <length> | <percentage> ]?
   

2. 重復線性漸變：repeating-linear-gradient()

   <repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
   <side-or-corner> = [left | right] || [top | bottom]
   <color-stop> = <color> [ <length> | <percentage> ]?
   

3. 徑向漸變：radial-gradient()

   <radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
   <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
   <shape> = circle | ellipse
   <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
   <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
   <circle-size> = <length>
   <ellipse-size> = [ <length> | <percentage> ]{2}
   <shape-size> = <length> | <percentage>
   <color-stop> = <color> [ <length> | <percentage> ]?
   

4. 重復徑向漸變：repeating-radial-gradient()

   <repeating-radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
   <position> = [ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?
   <shape> = circle | ellipse
   <size> = <extent-keyword> | [ <circle-size> || <ellipse-size> ]
   <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
   <circle-size> = <length>
   <ellipse-size> = [ <length> | <percentage> ]{2}
   <shape-size> = <length> | <percentage>
   <color-stop> = <color> [ <length> | <percentage> ]?
   

二. CSS漸變特性研究

接下來，以線性漸變為例進行研究；（注意：
所有特性的總結在文章最下面；）

從漸變的語法定義中可以得出：
特性1: 每個漸變至少需要指定2個色標color-stop；

我們先定義一個從0%到100%的漸變，如下：
CSS樣式：

background-image: linear-gradient(to right,red 0%,blue 100%);

示例效果：

特性2.png

從這個示例中可以得出：
特性2: 對于任意2個相鄰色標之間的顏色變化是：在前一個色標與后一個色標的位置之間，線性地把前一個色標的顏色過渡到后一個色標的顏色；

接下來，我們在色標1與色標2之前插入幾個沒有指定位置的色標，如下：
CSS樣式：

background-image: linear-gradient(to right,red 0%,green,yellow,purple,blue 100%);

示例效果：

特性3.png

從示例效果中可以看出，插入的幾個色標雖然沒有指定位置，但是它們是平分區間的，所以就有：
特性3: 對于多個沒指定位置的色標，它們的位置分別是：前面最近的有位置的色標的位置 與 后面最近有位置的色標的位置 之間的平分點；

如果把這個示例中的第1個和最后1個色標的位置都去掉，則所示色標都將沒有指定位置，效果如下：

CSS樣式：

background-image: linear-gradient(to right,red,green,yellow,purple,blue);

示例效果：

特性4.png

從示例效果中可以看出，即使把第1個和最后1個的色標的位置都去掉，第1個色標仍然是在最前端，最后1個色標仍然是在最后端，所以就有：
特性4: 如果第1個色標沒有指定位置，則第1個色標的位置是漸變區域的起始位置；
特性5: 如果最后1個色標沒有指定位置，則最后1個色標的位置是漸變區域的結束位置；

如果把非重復漸變的第1個色標的位置不放在最前端，最后1個色標的位置不放在最后端，則效果如下：

CSS樣式：

background-image: linear-gradient(to right,red 25%,green,blue 75%);

示例效果：

特性6.png

從示例效果中可以看出，對于非重復漸變，把第1個色標往后移后，第1個色標之前的顏色仍是第1個色標的顏色；把最后1個色標往前移后，最后一個色標之后的顏色仍是最后1個色標的顏色，所以就有：
特性6: 對于非重復漸變，第1個色標位置之前的顏色是第1個色標的顏色；最后一個色標位置之后的顏色是最后一個色標的顏色；

如果把上例的非重復漸變換成重復漸變，如下：

CSS樣式：

background-image: repeating-linear-gradient(to right,red 25%,green,blue 50%);

示例效果：

特性7.png

從示例效果中可以看出，對于第1個色標之前的區域 和 最后1個色標之后的區域，重復漸變會自動用指定的漸變區域平鋪；所以就有：
特性7: 對于重復漸變，會用漸變區域分別平鋪第1個色標之前的區域 和 最后1個色標之后的區域 ，直到填滿為止；

如果把此示例中的漸變區域縮小到零呢，如下：
CSS樣式：

background-image: repeating-linear-gradient(to right,red 50%,green,blue 50%);

示例效果：

特性8.png

從示例效果中可以看出，如果漸變區域為零，則會用最后一個色標的顏色填充整個區域；所以就有：
特性8: 對于重復漸變，如果漸變漸變區域的長寬為零，則會用最后1個色標的顏色填充整個區域；

如果后面的色標的位置在前端色標的位置的前面，如下：
CSS樣式：

background-image: linear-gradient(to right,red 50%,blue 25%);

示例效果：

特性9.png

從示例效果中可以看出，雖然后面的色標blue的位置設置在了前端的色標red的前面，但是最終，后面色標的位置是用前面的色標的位置作為自己的位置的；所以就有：
特性9: 如果前面色標設置的位置大于后面色標設置的位置，則后面色標設置的位置無效，所有比前端色標的位置小的色標，都將用 大于自身位置的前面的色標中位置最大的那個色標的位置 作為自身的位置；

總結以所有特性，就有：

CSS中漸變函數的特性：

1. 每個漸變至少需要指定2個色標color-stop；
2. 對于任意2個相鄰色標之間的顏色變化是：在前一個色標與后一個色標的位置之間，線性地把前一個色標的顏色過渡到后一個色標的顏色；
3. 對于多個沒指定位置的色標，它們的位置分別是：前面最近的有位置的色標的位置 與 后面最近有位置的色標的位置 之間的平分點；
4. 如果第1個色標沒有指定位置，則第1個色標的位置是漸變區域的起始位置；
5. 如果最后1個色標沒有指定位置，則最后1個色標的位置是漸變區域的結束位置；
6. 對于非重復漸變，第1個色標位置之前的顏色是第1個色標的顏色；最后一個色標位置之后的顏色是最后一個色標的顏色；
7. 對于重復漸變，會用漸變區域分別平鋪第1個色標之前的區域 和 最后1個色標之后的區域 ，直到填滿為止；
8. 對于重復漸變，如果漸變漸變區域的長寬為零，則會用最后1個色標的顏色填充整個區域；
9. 如果前面色標設置的位置大于后面色標設置的位置，則后面色標設置的位置無效，所有比前端色標的位置小的色標，都將用 大于自身位置的前面的色標中位置最大的那個色標的位置 作為自身的位置；

相關文章

• CSS中顏色突變的實現方案
• CSS中條紋效果的實現方案
• CSS中環形效果的實現方案
• CSS中網格效果的實現方案
• CSS中變換背景保持內容的實現方案
• 標簽、元素、視覺格式化模型、定位簡略相關概念的理解