漸變透過定義漸變線的起點和終點（根據漸變梯度的類型，漸變線在幾何上可以是直線、光線或螺旋）來指定漸變度，然後指定沿著這條線的點的顏色。顏色被平滑地混合以填充線的其餘部分，然後每種類型的漸變通過定義使用漸變線的顏色來產生實際的漸變。
| #值 |
描述 |
| # #direction
| 用角度值指定漸層的方向（或角度）。 |
| color-stop1, color-stop2,...
| 用於指定漸層的起止顏色。 |
這個函數（特性）接受的第一個參數是漸變的角度，他可以接受一個表示角度的值（可用的單位deg、rad、 grad或turn）或是表示方向的關鍵字（top、right、bottom、left、left top、top right、bottom right或left bottom）。第二個參數是接受一系列顏色節點（終止點的顏色）。
漸層容器（漸層框）
#一個漸層圖像和傳統的背景圖像不一樣，它是沒有維度（尺寸限制），它是無限的。那麼決定漸變影像可見區域是由漸層容器大小來決定的。
通常，如果給一個DOM元素的background-image或background使用linear-gradient，那麼其（漸層）顯示區域就是元素的border-box區域（如果不了解元素的border-box區域，建議先閱讀box-sizing相關的文件）。其實也是background-color或說透過url引入背景圖像的顯示區域。
然而，如果你透過CSS的background-size設定一個尺寸，比如說200px * 200px，這個時候漸層容器（漸層尺寸）就是 background-size設定的大小200px * 200px。在沒有使用background-position設定為其他值時，它預設是顯示在DOM元素的左上角（也就是background-position: left top）。
在CSS中漸變就是background的background-image，也就是說，適用於背景映像的CSS屬性都適合漸變。
漸層線
在漸層容器中，穿過容器中心點和色彩停止點連接在一起的線稱為漸層線。在下節介紹漸變角度相關的知識時，能幫助你更好的理解漸層線，所以更多的細節我們在下一節介紹。
漸變角度
很明顯，使用linear-gradient是透過漸層的角度來控制漸層的方向。接下來我們一起來了解其中更多的細節。
C點漸層容器中心點，A是透過C點垂直線與經由C點漸層線的夾角，這個角稱為漸層角度。
可以透過下面兩個方法來定義這個角度：
##如果省略角度值的設置，那預設是to bottom
（對應#180deg
或
.5turn）：
#在上面的範例中，漸層角度是沒有設置，white至red漸變色從top至bottom漸變，它和使用to bottom關鍵字得到的效果是一樣的，如下所示： #########下面兩張圖的效果是使用to top和0deg，它們的效果也是一樣的：############### #########另一個是使用頂角關鍵字重要的一點是它依賴漸變容器的尺寸，例如to top right（或者其它頂角關鍵字）。 ######如果你想要一個red至blue的漸變，方向是至元素的top right。邏輯上，blue應該在元素的右上角，以及中間的紫色漸變周圍應該形成一條直線，從左上角到右下角穿過。如下圖所示：###############所以to top right並不表示漸變線穿過右上角，也就是說漸變角度並不代表是45deg。 #########也就是說，如果linear-gradient使用頂角關鍵字時（to top right、to top left、to bottom right和to bottom left），漸變線首先通過元素中心點並且與頂點垂直相交，與中心點垂直線所構成的夾角才是漸層角度。 #########讓我們看看漸層角度動態變化時，漸層線是怎麼移動的：###
回顾一下渐变角度：
渐变线长度a
之前我们看到渐变色停止分布沿着渐变线是需要解释的一件事情。你可能已经注意到了，在前面的示例中，停止的渐变颜色有时候在渐变容器以外的位置，这看起来有点奇怪，但如果你知道其中的逻辑之后，你就不会这么认为了。先看一下这个示例：
我们想要一个red至blue的渐变，渐变的角度是45deg，因为渐变容器的比例，渐变线不能通过右上角。但浏览器想要做什么（规范告诉它做什么），能使右上角是blue。
如果我们让渐变线的开始和结束都在渐变容器的边缘，那么blue将会覆盖渐变容器更大的区域，渐变不会有更多的扩散。
因此，为了做到这一点，渐变线有时不得不延长到渐变容器之外。其实很容器知道它的开始和结束位置。通过最近的角落画一条垂直于渐变线的线，与渐变线交叉的地方，就是渐变的开始和结束位置。
事实上，如果W是渐变容器的宽度，H是渐变容器的高度，A是渐变角度，那么渐变线的长度可以通过下面的公式计算：
abs(W * sin(A)) + abs(H * cos(A))
渐变色节点（Color stops）
渐变色的每一个可以这样定义：
<color> [<percentage> | <length>]?
因此不是强制性来指定颜色在渐变线的位置。例如：
如果没有显式指定颜色在渐变线上的位置，这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。如果有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。在上面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。
当然，也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示（相对于渐变线计算），也可以是任何一个CSS长度单位。比如下面这个示例：
正如你所看到的，五个颜色的每个颜色都有自己的位置，而且是以像素为单位。这些位置从渐变线的开始位置处开始计算。
使用这些位置，你可以想出各种各样的漂亮效果。这样你可以做一个多色渐变：
上图中，有七个颜色，其中下一个颜色是在上一个颜色开始位置，这意味弟浏览器不需要填满两个颜色之余间的空间。
当然这样蛮好的也很有趣，如果你把颜色位置配合一起来使用会是什么样的情形。然后让浏览器自动分配你省略的颜色位置。
在上面的示例中，第二个颜色orange没有明确的指定其在渐变线上的位置，所以浏览器会自动计算出其位置。它可以根据第一个位置和下一个位置很容易计算出来。但如果有多个颜色没有指定位置，或者前一个或后一个都没有指定位置，那它就变得越来越复杂。
看下面这个示例：
在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色black放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。
上圖第一個和最後一個顏色放置在漸變線指定位置，剩下的顏色平均分佈在兩者之間。
當然，如果是0%和100%之間，我們很容易控制。但也有會超出這個範圍。例如上面的範例，最後一個顏色是在漸變線的120%位置處，因此其他顏色也會根據這個位置平均分佈（預設的起始位置仍然是0%，在這個範例中）。
如果你想讓你的瀏覽器工作更多，為什麼不能依序指定顏色在漸層線上的位置呢？事實上，顏色點位置是按照你預期的指令操作，並不會阻止你不按其位置順序來操作。但如果後面的數值比前面的數值更小時，瀏覽器會自動做相對應的修正處理。例如：
讓我們從第一個顏色red開始，其定位在漸層線的30%位置處，第二個顏色orange在10%位置，但這是錯誤的，正如上面所說的，顏色的停止點是一個增量。這時候，瀏覽器將會修正第二個顏色的位置，它將會和前一個顏色的位置一樣，也分佈在漸層線的30%位置。然後第三個顏色yellow分佈在漸變線的60%位置處，但緊接在後的第四個顏色blue為40%，瀏覽器同樣會修正並設定其位置與前一個顏色位置相同。
最後一點，在上面這個範例中，最後一個顏色blue是不正確的位置，因此瀏覽器將會修正它的位置與之前的位置相同，在這種情況之下並不是與其相鄰的顏色yellow，也不會是orange，它會追溯到第一個顏色red位置處。因此，red和blue都分佈在漸變線的30%處，因此其中yellow和orange兩色都將不可見。
工具
文章中的截圖都是從Codepen寫的一個簡單工具取得的，你可以在輸入框中輸入任何一個漸層的值，你可以看到漸層效果以及漸層線，漸層角度和漸層顏色的位置。
目前這個工具還有各種各樣的缺陷和限制（請參閱JavaScript中的註解），所以不要有過高的期望，當然你也可以在這個基礎上完善這個工具，幫助大家更好的理解漸線漸層。
工具位址：https://codepen.io/captainbrosset/pen/ByqRMB
（學習影片分享：css影片教學）
