CSS中的linear gradient(線性漸變)可能會導(dǎo)致各種各樣的怪異和怪異的結(jié)果。其中的一些怪異在于它的語法。
我事先說明下：我在這里討論的一些內(nèi)容并沒有被廣泛的實施，關(guān)于這些內(nèi)容甚至都沒有板上釘釘。雖然接近，但是仍然可能會有變動。即使不做出變動，這也不是一篇“你可以立刻使用的消息”文章。就像 我所創(chuàng)作的如此多的文章 那樣，該篇文章更像是對CSS中某個小角落的溜達，僅僅是查看 我們將來可能看到的內(nèi)容。
盡管線性漸變表面上看起來復(fù)雜，但是它還是相當簡單的。你定義一個漸變的方向，接著列出你所需要的color stops(color stops的數(shù)量你可以隨意指定，一般都是>=2個)。在指定線性漸變的過程中，你實際上使用文本描繪了一張圖片，某種程度上類似于SVG所做的那樣。這是個要謹記的關(guān)鍵點：linear gradient(或radial gradient)是一張圖片，就像 任意的GIF或PNG圖片 那樣。這也就意味著：你可以通過使用多個background語法 在某個元素的背景中 混合使用 ‘位圖(數(shù)字圖片，如.gif, .jpg, and .bmp.)和漸變圖片’。
讓我們回到漸變。這兒有一張非常簡單的漸變圖片：
linear-gradient(45deg, red, blue)
45度角定義了漸變線的方向，漸變線就是定義‘漸變前行方向’的那條有方向的線。漸變線通常穿過背景區(qū)域的中心，漸變線的方向是由你聲明的，也就是作者。在這個例子中，漸變線的方向被聲明為‘指向45度角的方向’。red, blue是color stops。既然red, blue沒有定義stop distances，該距離被默認為red 0%, blue 100%。這也就意味著一個由紅到藍的漸變，0%距離的顏色為純紅，100%距離的顏色為純藍，0~100%距離的顏色為混合色，該漸變沿著漸近線前進。
你也可以創(chuàng)建hard stops:
linear-gradient(45deg, green 50%, lightblue 50%)
上面的漸變會讓你得到圖片1中展示的結(jié)果，在該圖中我已經(jīng)添加了箭頭來表明漸近線的方向，也添加了背景區(qū)域的中心點。在漸變中的每個條紋都是垂直于漸變線的；這也就是‘為什么2種顏色在50%距離的邊界 會垂直于 漸近線’。
Figure 1
需要指出的是：線性漸變的角度是羅盤角（有別于數(shù)學上的角度）。羅盤角是以背景區(qū)域的中心點為中心，豎直向上的角度為0度。順時針角度增加，逆時針角度為負。當然你也可以使用‘方向關(guān)鍵字’，這里主要有2種類型的'方向關(guān)鍵字'。
羅盤角
第一種使用關(guān)鍵字的方式是僅僅聲明一個方向，top, bottom, right, left中的某2個任意搭配。在這個例子中 令人恐慌的地方 在于：你聲明了漸近線是從哪個方向起始的，不是漸近線指向的方向；也就是 你指定了漸近線的起始位置而不是目標方向。所以，如果你想要你的漸進方向由從左下角向右上角，你實際上要聲明的是bottom left:
linear-gradient(bottom left, green 50%, lightblue 50%)
但是bottom left并不等于45度，除非背景區(qū)域是正方形。如果背景區(qū)域不是正方形，那么漸近線就從背景區(qū)域的一個角指向?qū)?，并且邊界線是垂直于漸近線的，就像圖2展示的那樣。同樣的，為了闡述清楚，我也添加了漸近線和中心點。
Figure 2
當然，這就意味著：如果背景區(qū)域在任意方向的尺寸(寬, 高)發(fā)生改變，那么漸近線的角度也會發(fā)生改變。如果背景區(qū)域變得更高或者更窄，漸近線會逆時針旋轉(zhuǎn)；變得更矮或者更寬，漸近線會順時針旋轉(zhuǎn)。這可能正是你所想要的。不同于角度值，角度值 在背景區(qū)域的尺寸發(fā)生改變時 漸近線是永遠不會旋轉(zhuǎn)的。
第二種使用關(guān)鍵字的方式 看起來是類似的，但是會有截然不同的結(jié)果。你同樣可以使用top/bottom/left/right某2個的任意搭配，但是你需要額外添加關(guān)鍵字to，像下面這樣：
linear-gradient(to top right, green 50%, lightblue 50%)
在這個例子中，你在聲明漸近線的目標位置，并不是起始位置，這是要清楚的；畢竟，你聲明的是to top right。然而，當你使用這種方式時，你不是指定背景區(qū)域的右上角。你指定了一個大致的向上向右的方向。你可以查看在圖3中查看到上例的結(jié)果；同樣地，也添加了漸近線。
Figure 3
注意這個
hard-stop邊界線，它實際上從左上角延伸到了右下角(沒有一個是右上角)。這是因為：在關(guān)鍵字前加上to，你就觸發(fā)了所謂的magic corners行為。當你這樣做的時候，不管背景區(qū)域的尺寸如何改變，邊界線總是從左上角延伸到右下角。這些是‘magic corners’。因此，漸近線并不是指向背景區(qū)域的右上角，除非背景區(qū)域是完美地正方形 - 此時漸近線才指向背景區(qū)域的右上角的象限(數(shù)學中的第一象限)。顯然，術(shù)語magic quadrants不比magic corners更合理。
改變背景區(qū)域的尺寸同樣會使?jié)u近線 旋轉(zhuǎn)。減少背景區(qū)域的高度 或者 增加背景區(qū)域的寬度 會使邊界線逆時針旋轉(zhuǎn)(同樣的漸近線也會逆時針旋轉(zhuǎn))；增加高度 或者 減少寬度 會使邊界線順時針旋轉(zhuǎn)(漸近線順時針旋轉(zhuǎn))。唯一的不同在于起始狀況。
除此以外，如果你想要使用關(guān)鍵字 來使 漸近線指向背景區(qū)域的某個角，像圖2中的那樣，不要指定目標位置(而是應(yīng)該指定起始位置)。同樣地，你也不能聲明一個起始象限。讓漸近線從某個角延伸到對角 意味著：要聲明漸近線的起始位置(圖2)。如果你想要得到magic corners效果(50%位置的color-stop line從某個角延伸到對角，即邊界線從某個角到對角)：要聲明目標象限(圖3)。
關(guān)于實際的支持：截止到‘寫這篇文章’為止，只有Firefox和Opera支持magic corners。所有目前的瀏覽器 - 包括IE10 - 支持角度和non-magic關(guān)鍵字，也就是說Opera和Firefox支持2種方式的關(guān)鍵字。
這是目前linear gradient有關(guān)事情的狀態(tài)。我有興趣知道：你對于各種各樣的關(guān)鍵字和行為是如何思考的 - （我知道 理解這2種方式 在開始時 是有些困難的，因為2中方式有著截然不同的效果 看起來讓人困惑）。你說呢？
- 本文翻譯自：http://meyerweb.com/eric/thoughts/2012/04/26/lineargradient-keywords/
- 轉(zhuǎn)載請注明出處
