css的線性漸變詳解

時間  2019-11-08
標籤 css 線性 漸變 詳解 欄目 CSS 简体版
原文   原文鏈接

漸變背景一直以來在Web頁面中都是一種常見的視覺元素。但一直以來，Web設計師都是經過圖形軟件設計這些漸變效果，而後以圖片形式或者背景圖片的形式運用到頁面中。Web頁面上實現的效果，僅從頁面的視覺效果上來看，與設計並沒有任何差別。css

事實上這種方法是比較麻煩的，由於首先須要設計師進行設計，而後進行切圖，在經過樣式應用到頁面中。另外，在實際應用中可擴展性差，還直接影響頁面性能。前端

值得慶幸的是，W3C組織將漸變設計收入到CSS3標準中，讓廣大的前端設計師直接受益，能夠直接經過CSS3的漸變屬性製做相似漸變圖片的效果。並且漸變屬性慢慢獲得了衆多現代瀏覽器的兼容，甚至煩人的IE，在IE10版本也支持了這個屬性。css3

 

CSS3漸變的介紹

欲要了解CSS3漸變，就先要知道CSS3漸變是什麼？從早前的設計中咱們能夠知道，漸變是兩種或多種顏色之間的平滑過渡。在建立漸變的過程當中，能夠指定多箇中間顏色值，這個值稱爲色標。每一個色標包含一種顏色和一個位置，瀏覽器從每一個色標的顏色淡出到下一個，以建立平滑的漸變。以下圖所示：web

再說CSS3漸變——線性漸變

漸變能夠應用於任何使用背景圖片的地方。這意味着在CSS樣式中，漸變至關於背景圖片，在理論上可在任何使用url() 值的地方採用，好比最多見的background-image、list-style-type以及前面介紹的CSS3的圖像邊框屬性border-image。但直到目前爲止，僅在背景圖片中獲得最完美的支持。瀏覽器

漸變功能的實現

最先支持CSS3漸變的是Webkit內核的瀏覽，隨後在Firefox和Opera等瀏覽器都獲得支持，可是衆瀏覽器之間沒有獲得統一的標準，用法差別很大。不一樣的渲染引擎實現漸變的語法也不一樣，各瀏覽器下使用都須要帶上本身的前綴，給前端設計師們帶來極大的不便。ide

不過還好，到寫本章內容的時候，CSS3漸變屬性在IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等瀏覽器已徹底支持W3C的標準語法，但在Webkit內核下的Safari、iOS Safari、Android瀏覽器和Blackberry瀏覽器中仍是須要添加瀏覽器的前綴 「-webkit-」。函數

較之前相比，雖然CSS3的漸變屬性在衆瀏覽器中獲得較好的支持，但在實際使用的時候也像製做軟件（Photoshop CS六、Firework CS6等）的漸變工具同樣，將漸變分紅了幾種：線性漸變，徑向漸變、重複線性漸變和重複徑向漸變。接下來，咱們將依次介紹它們。工具

線性漸變

在線性漸變過程當中，顏色沿着一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或着沿任何任意軸。若是你曾使用過製做圖件，好比說Photoshop，你對線性漸變並不會陌生。性能

CSS3製做漸變效果，其實和使用製做軟件中的漸變工具沒有什麼差異。首先須要指定一個漸變的方向、漸變的起始顏色、漸變的結束顏色。具備這三個參數就能夠製做一個最簡單、最普通的漸變效果。若是你須要製做一個複雜的多色漸變效果，就須要在同一個漸變方向增添多個色標。具有這些漸變參數（至少三個），各瀏覽器就會繪製與漸變線垂直的顏色結來填充整個容器。瀏覽器渲染出來的效果就相似於製做軟件設計出來的漸變圖像，從一種顏色到另外一種顏色的平滑淡出，沿所指的線性漸變方向實現顏色漸變效果。url

1、線性漸變語法與參數

線性漸變的語法相對於其餘的CSS3屬性的語法而言要複雜的多。早期的語法在各瀏覽器內核下其語法盡不相同，特別是在Webkit內核之下還分新舊兩種版本。接下來咱們先從各瀏覽器下的語法入手，開始介紹CSS3的線性漸變語法。

1. Webkit引擎的CSS3線性漸變語法與屬性參數

Webkit是第一個支持CSS3漸變的瀏覽器引擎，不過其語法也相對其餘瀏覽器引擎複雜，還分爲新舊兩個版本。

Webkit引擎老式語法

-webkit-gradien(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)

Webkit引擎新式語法

-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

Webkit引擎漸變屬性參數

-webkit-gradient是webkit引擎對漸變的實現一共有五個參數。第一個參數表示漸變類型（type），能夠是線性漸變linear或者徑向漸變radial。第二個參數和第三個參數，都是一對值，分別表示漸變的起點位置和終點位置。這對值能夠用座標形式表示，也能夠用關鍵值表示，好比left top(左上角)和left bottom(左下角)。第四個和第五個參數，分別是兩個color-stop函數（色標）。color-stop函數接受兩個參數，第一個表示漸變的位置，0表示起點，0.5爲中點,1爲結束點；第二個表示該點的顏色。 以下圖所示:

再說CSS3漸變——線性漸變

2. Gecko引擎的CSS3的線性漸變語法與屬性參數

Gecko引擎的瀏覽器Firefox在3.6版本就開始支持CSS3的線性漸變屬性。Gecko引擎與Webkit引擎的新版本漸變設計時用法基本相同，只是使用的私有前綴不一樣。

Gecko引擎的漸變語法

-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

Gecko引擎的漸變屬性參數

在Gecko引擎的漸變中共有三個參數，第一個數數表示線性漸變的方向，例如:top是從上到下、left是從左到右。若是定義成left top，那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。你還能夠在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

再說CSS3漸變——線性漸變

3. Presto引擎的CSS3線性漸變語法與屬性參數

Presto引擎的Opera瀏覽器在11.6版本開始就支持CSS3的線性漸變。在Presto引擎瀏覽器中CSS3線性漸變的使用語法和Gecko引擎瀏覽器中的線性漸變的語法很是相似，惟一不一樣的就是在Presto引擎瀏覽器中須要使用其本身的私有前綴爲「-o-」。

Presto引擎的線性漸變語法

-o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

Presto引擎的線性漸變的屬性參數

-o-linear-gradient也具備三個參數：第一個參數表示線性漸變的方向，top表示從上到下，left表示從左到右，若是定義成left top表示從左上角到右下角。第二個和第三個參數分別是起點顏色和結束顏色。還能夠在它們之間插入更多的參數，表示多種顏色的漸變。如圖所示：

再說CSS3漸變——線性漸變

4. Trident引擎的CSS3線性漸變語法與屬性參數

Trident引擎的瀏覽器主要有IE，早期版本的IE瀏覽器是不支持CSS3線性漸變的屬性，不過在其IE10開始支持了這個屬性。在這裏咱們主要針對IE10＋瀏覽器的CSS3線性漸變進行簡單的介紹。

Trident引擎的CSS3線性漸變語法

-ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

Trident引擎的CSS3線性漸變屬性參數

-ms-linear-gradient屬性參數和-moz-linear-gradient以及-o-linear-gradient的屬性參數是同樣的，這裏就不在進行重複性的介紹。

5. W3C標準線性漸變語法與屬性參數

W3C組織於2012年04月發佈了CSS3線性漸變的CR版本（候選人推薦版本）。這一次發佈的CSS3漸變屬性有着很大的變化，使用語法較前面的版本要簡單多，容易理解的多。最讓你們感到高興的是，到寫本文的時候，全部現代瀏覽器都支持W3C的標準語法，包括曾經使人討厭的IE瀏覽器，也在IE10中支持了標準語法。

W3C標準線性漸變語法

linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)

W3C標準線性漸變屬性參數

W3C標準線性漸性語法包括三個主要屬性參數：第一個參數指定了漸變的方向，同時決定了漸變顏色的中止位置。這個參數值能夠省略，當省略不寫的時候其取值爲「to bottom」。在決定漸變的方向主要有兩種方法：

  •  <angle>：經過角度來肯定漸變的方向。0度表示漸變方向從下向上，90度表示漸變方向從左向右。若是取值爲下值，其角度按順時針方向旋轉。
  •  關鍵詞：經過關鍵詞來肯定漸變的方向。好比「to top」、「to right」、「to bottom」和「to left」。這些關鍵詞對應的角度值爲「0deg」、「90deg」、「180deg」和「270deg」。除了使用「to top」、「top left」以外，還可使用「top left」左上角到右下角、「top right」左上角到右下解等。
  •  第二個和第三個參數，表示顏色的起始點和結束點。你們能夠在從中插入更多的顏色值。

2、線性漸變的基本用法

前幾節中介紹了各引擎瀏覽器以及W3C標準中的CSS3線性漸變的語法以及相關屬性的基本知識。在W3C標準語法一節中，咱們能夠得知， CSS3在各瀏覽器下獲得較好的支持，接下來，咱們主要以標準語法的使用，經過案例向你們展現CSS3線性漸變的基本使用。

顏色從底部向頂部漸變（Bottom → Top）

製做從底部到頂部直線漸變最簡單的方法直接使用「to top」關鍵詞，表示第一顏色向第二顏色漸變。實現相似於「to top」效果還可使用角度值「0deg」、「360deg」和「-360deg」。

div {
  width: 400px;
  height: 150px;
  border: 1px solid #666;
  line-height: 150px;
  text-align: center;
  font-weight: 900;
  font-size: 30px;
  color: #fff;
  margin: 10px auto;
}
.toTop {
  background-image:-webkit-linear-gradient(to top, orange, green);
  background-image:linear-gradient(to top,orange,green);
}
.toTop-deg{
  background-image:-webkit-linear-gradient(0deg, orange, green);
  background-image:linear-gradient(0deg,orange,green);
}
.toTop-deg2{
  background-image:-webkit-linear-gradient(360deg, orange, green);
  background-image:linear-gradient(360deg,orange,green);
}
.toTop-deg3 {
  background-image:-webkit-linear-gradient(-360deg, orange, green);
  background-image:linear-gradient(-360deg,orange,green);
}

效果以下所示：

再說CSS3漸變——線性漸變

CodePen的案例

正如效果圖10-5所示，在Safari瀏覽器下還不支持「to top」這樣的關鍵詞，並且在角度值的解析漸變也不一樣。「to top」所展現的是第一色從底部向頂部的第二色漸變，如上例所示：從orange向green漸變，並且是從底部向頂部直線漸變。

顏色從頂部向底部漸變（top→bottom）

「to top」實現了顏色從底部向頂部漸變，其有關鍵詞「to bottom」恰好與「to top」實現的效果相反，能夠實現從頂部向底部實現漸變效果。「to bottom」實現頂部向底部實現漸變也可使用角度值：「180deg」和「-180deg」實現同等效果。

.toBottom {
  background-image:-webkit-linear-gradient(to bottom, orange, green);
  background-image:linear-gradient(to bottom,orange,green);
}
.toBottom-deg{
  background-image:-webkit-linear-gradient(180deg, orange, green);
  background-image:linear-gradient(180deg,orange,green);
}
.toBottom-deg2{
  background-image:-webkit-linear-gradient(-180deg, orange, green);
  background-image:linear-gradient(-180deg,orange,green);
}

其效果正好與「to top」效果相反，如圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to bottom」實現了第一色從頂部向底部的第二色直線漸變，正如此例所示，「orange」向「green」漸變，並且是從頂部向底部漸變。

顏色從右向左漸變（right→left）

「to left」關鍵詞實現了從右向左顏色漸變，實現第一顏色從右向左實現第二顏色漸變。「to left」實現的效果也可使用角度值「90deg」和「270deg」：

.toLeft {
  background-image:-webkit-linear-gradient(to left, orange, green);
  background-image:linear-gradient(to left,orange,green);
}
.toLeft-deg{
  background-image:-webkit-linear-gradient(-90deg, orange, green);
  background-image:linear-gradient(-90deg,orange,green);
}
.toLeft-deg2{
  background-image:-webkit-linear-gradient(270deg, orange, green);
  background-image:linear-gradient(270deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to left」關鍵詞實現了第一顏色從右向左第二顏色漸變。與「to left」關鍵詞實現的等同效果還有「-90deg」和「270deg」。從圖10-7效果中能夠看出，「to left」實現了「green」(第二色)向「orange」(第一色)漸變效果，其方向是從左向右。

顏色從左向右漸變（left→right）

「to right」實現的效果正好與「to left」效果相反。實現了顏色從左向右直線漸變。與「to right」等同的效果也可使用角度值：「90deg」和「-270deg」。

.toRight {
  background-image:-webkit-linear-gradient(to right, orange, green);
  background-image:linear-gradient(to right,orange,green);
}
.toRight-deg{
  background-image:-webkit-linear-gradient(90deg, orange, green);
  background-image:linear-gradient(90deg,orange,green);
}
.toRight-deg2{
  background-image:-webkit-linear-gradient(-270deg, orange, green);
  background-image:linear-gradient(-270deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to right」關鍵詞實現了第一顏色從左向右，實現線性漸變。也就是第一顏色的「orange」從左向右的第二顏色「green」漸變。

從右下角向左上角

「to top left」主要實現從右下角向左上角線性漸變。也就是第一顏色「orange」從右下角向左上角的第二顏色（green）實現線性漸變。

.toTopLeft {
  background-image:-webkit-linear-gradient(to top left, orange, green);
  background-image:linear-gradient(to top left,orange,green);
}
.toTopLeft-deg{
  background-image:-webkit-linear-gradient(315deg, orange, green);
  background-image:linear-gradient(315deg,orange,green);
}
.toTopLeft-deg2{
  background-image:-webkit-linear-gradient(-45deg, orange, green);
  background-image:linear-gradient(-45deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to top left」實現了第一顏色從右下角向左上角第二顏色漸變，其效果與角度值「315 deg」和「-45deg」相似，但細節上略有不一樣，正如上圖所示。

從左下角到右上角線性漸變

「to top right」關鍵詞實現左下角到右上角的線性漸變。也就是第一顏色「orange」從左下角向右上角第二顏色（green）漸變。

.toTopRight {
  background-image:-webkit-linear-gradient(to top right, orange, green);
  background-image:linear-gradient(to top right,orange,green);
}
.toTopRight-deg{
  background-image:-webkit-linear-gradient(45deg, orange, green);
  background-image:linear-gradient(45deg,orange,green);
}
.toTopRight-deg2{
  background-image:-webkit-linear-gradient(-315deg, orange, green);
  background-image:linear-gradient(-315deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to top right」關鍵詞實現了第一色（orange）向第二色（green）從左下角向右上角實現線性漸變，其效果與角度值「315deg」和「-45deg」效果相似，但細節上略有不一樣。

從右上角到左下角線性漸變

「to bottom left」關鍵詞實現了右上角向左下角直線漸變，也就是第一顏色（orange）從右上角向左下角第二顏色（green）漸變。

.toBottomLeft {
  background-image:-webkit-linear-gradient(to bottom left, orange, green);
  background-image:linear-gradient(to bottom left,orange,green);
}
.toBottomLeft-deg{
  background-image:-webkit-linear-gradient(225deg, orange, green);
  background-image:linear-gradient(225deg,orange,green);
}
.toBottomLeft-deg2{
  background-image:-webkit-linear-gradient(-135deg, orange, green);
  background-image:linear-gradient(-135deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to bottom left」實現了第一顏色「orange」從右上角向左下角第二色（green）實現線性漸變。其效果與角度值「225deg」和「-135deg」效果相似，但細節上略有不一樣。

從左上角向右下角線性漸變

「to bottom right」關鍵詞實現了左上角向右下角直線漸變，也就是第一顏色（orange）從左上角向右下角的第二顏色（green）漸變。

.toBottomRight {
  background-image:-webkit-linear-gradient(to bottom right, orange, green);
  background-image:linear-gradient(to bottom right,orange,green);
}
.toBottomRight-deg{
  background-image:-webkit-linear-gradient(135deg, orange, green);
  background-image:linear-gradient(135deg,orange,green);
}
.toBottomRight-deg2{
  background-image:-webkit-linear-gradient(-225deg, orange, green);
  background-image:linear-gradient(-225deg,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

「to bottom right」關鍵詞實現了第一顏色（orange）從左上角向右下角的第二顏色（green）線性漸變，其效果與角度值「225deg」和「-135deg」實現的效果相似，但在細節上略有不一樣。

上面演示了線性漸變的一些基本效果，主要演示了關鍵詞與以對應的角度值實現的漸變效果。並且其中角度漸變取值多項，好比說「to top left」實現了右下角向左上角漸變。而與其實現同等效果的除了對應的角度值「315deg」和「-45deg」以外，還與「to left top」關鍵詞實現的效果是同樣的。換句話說「to top left」和「top left top」關鍵詞實現的效果是相同的。按一樣的原理，其餘角度值也有相對應的關鍵詞：

/*向左上角漸變*/
.toTopLeft {
  background-image:-webkit-linear-gradient(to top left, orange, green);
  background-image:linear-gradient(to top left,orange,green);
}
.toLeftTop {
  background-image:-webkit-linear-gradient(to left top, orange, green);
  background-image:linear-gradient(to left top,orange,green);
}
/*向右上角漸變*/
.toTopRight{
  background-image:-webkit-linear-gradient(to top right, orange, green);
  background-image:linear-gradient(to top right,orange,green);
}
.toRightTop {
  background-image:-webkit-linear-gradient(to right top, orange, green);
  background-image:linear-gradient(to right top,orange,green);
}
/*向左下角漸變*/
.toBottomLeft {
  background-image:-webkit-linear-gradient(to bottom left, orange, green);
  background-image:linear-gradient(to bottom left,orange,green);
}
.toLeftBottom {
  background-image:-webkit-linear-gradient(to left bottom, orange, green);
  background-image:linear-gradient(to left bottom,orange,green);
}
/*向右下角漸變*/
.toBottomRight {
  background-image:-webkit-linear-gradient(to bottom right, orange, green);
  background-image:linear-gradient(to bottom right,orange,green);
}
.toRightBottom {
  background-image:-webkit-linear-gradient(to right bottom, orange, green);
  background-image:linear-gradient(to right bottom,orange,green);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

綜上所述：使用關鍵詞實現的線性漸變效果能夠從關鍵詞的方向性來定，例如「to top」能夠理解爲「向上」線性漸變。簡單點理解就是第一顏色從下向上的第二顏色線性漸變，正如前面的示例所示，「to top」也就是第一顏色「orange」從底部向頂部的第二顏色「green」線性漸變。

多色線性漸變

前面向你們演示的效果僅是一些簡單的線性漸變（兩色漸變），其實在實際中，漸變不只僅是隻有兩種顏色，會有多色。接下來，咱們一塊兒來看一個從左向右的五彩漸變：

.toLeft {
  background-image:-webkit-linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
  background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
}
.toRight {
  background-image:-webkit-linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
  background-image:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}
.toTop {
  background-image:-webkit-linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);
  background-image:linear-gradient(to top, red, orange,yellow,green,blue,indigo,violet);
}
.toBottom {
  background-image:-webkit-linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);
  background-image:linear-gradient(to bottom, red, orange,yellow,green,blue,indigo,violet);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

3、線性漸變實際應用

如今咱們很好的理解了如何聲明線性漸變，下面讓咱們來聲明本身的漸變。

在咱們實現PSD轉換Web頁面時，有時候在頁面的設計圖中會包含漸變效果。爲了實現設計效果圖中的漸變效果同樣，咱們能夠藉助相關的製做軟件，例如：Photoshop製圖軟件。經過製做軟件打開設計原文件，並經過製圖工具中漸變工具肯定相關的漸變參數，如圖所示：

再說CSS3漸變——線性漸變

經過Photoshop屏幕截圖能夠注意到，顏色從0％的不透明度開始，第一個色標的位置位於0%,其透明度爲0%，第二個色標位置爲80%的不透明度，位置位於8%。咱們可使用這個漸變工具從CSS聲明中捕捉相關數據，咱們能夠實現自定義線性漸變：

.toLeft {
  background-image:-webkit-linear-gradient(
    to left, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%); 
  background-image:linear-gradient(
    to left, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%); 
  }
.toRight {
  background-image:-webkit-linear-gradient(
    to right, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%);
  background-image: linear-gradient(
    to right, 
    rgba(255,0,0,0) 0%, 
    rgba(255,0,0,0.8) 7%, 
    rgba(255,0,0,1) 11%, 
    rgba(255,0,0,1) 12%, 
    rgba(255,252,0,1) 28%, 
    rgba(1,180,7,1) 45%, 
    rgba(0,234,255,1) 60%, 
    rgba(0,3,144,1) 75%, 
    rgba(255,0,198,1) 88%, 
    rgba(255,0,198,0.8) 93%, 
    rgba(255,0,198,0) 100%);
}

效果以下圖所示：

再說CSS3漸變——線性漸變

CodePen的案例

上圖再證實，一個漸變能夠包含多個色標，位置值爲0~1之間的小數，或者0~100%之間的百分數，指定色標的位置比例，其用法與Photoshop中的值線漸變工具用法類似。

其實早期在站上有一篇關於漸變的教程《CSS3 Gradient》。只因裏面的內容對於如今來使用，有一些落後了，所以在整理《CSS3核心技術》的時候，從新整理了漸變的相關知識。在這一篇中咱們主要介紹了漸變中的線性漸變的一些基本語法和基本使用。其實裏面還有一個實例沒有放上來，由於擔憂文章過長。不過這樣的案例在站上層出不窮，也不差這一個。下一篇咱們繼續漸變的話題，主要向你們介紹徑向漸變的使用，感興趣的同窗能夠觀注相關更新。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程