CSS中的linear gradient(線性漸變)可能會(huì)導(dǎo)致各種各樣的怪異和怪異的結(jié)果期揪。其中的一些怪異在于它的語法秉宿。
我事先說明下：我在這里討論的一些內(nèi)容并沒有被廣泛的實(shí)施，關(guān)于這些內(nèi)容甚至都沒有板上釘釘斜做。雖然接近趁尼，但是仍然可能會(huì)有變動(dòng)。即使不做出變動(dòng)催蝗，這也不是一篇“你可以立刻使用的消息”文章。就像 我所創(chuàng)作的如此多的文章 那樣育特，該篇文章更像是對(duì)CSS中某個(gè)小角落的溜達(dá)生逸，僅僅是查看 我們將來可能看到的內(nèi)容。
盡管線性漸變表面上看起來復(fù)雜，但是它還是相當(dāng)簡(jiǎn)單的槽袄。你定義一個(gè)漸變的方向，接著列出你所需要的color stops(color stops的數(shù)量你可以隨意指定锋谐，一般都是>=2個(gè))遍尺。在指定線性漸變的過程中，你實(shí)際上使用文本描繪了一張圖片涮拗，某種程度上類似于SVG所做的那樣乾戏。這是個(gè)要謹(jǐn)記的關(guān)鍵點(diǎn)：linear gradient(或radial gradient)是一張圖片，就像 任意的GIF或PNG圖片 那樣三热。這也就意味著：你可以通過使用多個(gè)background語法 在某個(gè)元素的背景中 混合使用 ‘位圖(數(shù)字圖片鼓择，如.gif, .jpg, and .bmp.)和漸變圖片’。
讓我們回到漸變就漾。這兒有一張非常簡(jiǎn)單的漸變圖片：
linear-gradient(45deg, red, blue)
45度角定義了漸變線的方向呐能，漸變線就是定義‘漸變前行方向’的那條有方向的線。漸變線通常穿過背景區(qū)域的中心抑堡，漸變線的方向是由你聲明的摆出，也就是作者。在這個(gè)例子中首妖，漸變線的方向被聲明為‘指向45度角的方向’偎漫。red, blue是color stops。既然red, blue沒有定義stop distances有缆，該距離被默認(rèn)為red 0%, blue 100%象踊。這也就意味著一個(gè)由紅到藍(lán)的漸變，0%距離的顏色為純紅棚壁，100%距離的顏色為純藍(lán)杯矩，0~100%距離的顏色為混合色，該漸變沿著漸近線前進(jìn)灌曙。
你也可以創(chuàng)建hard stops:
linear-gradient(45deg, green 50%, lightblue 50%)
上面的漸變會(huì)讓你得到圖片1中展示的結(jié)果菊碟，在該圖中我已經(jīng)添加了箭頭來表明漸近線的方向，也添加了背景區(qū)域的中心點(diǎn)在刺。在漸變中的每個(gè)條紋都是垂直于漸變線的逆害；這也就是‘為什么2種顏色在50%距離的邊界 會(huì)垂直于 漸近線’。
Figure 1
需要指出的是：線性漸變的角度是羅盤角（有別于數(shù)學(xué)上的角度）蚣驼。羅盤角是以背景區(qū)域的中心點(diǎn)為中心魄幕，豎直向上的角度為0度。順時(shí)針角度增加颖杏，逆時(shí)針角度為負(fù)纯陨。當(dāng)然你也可以使用‘方向關(guān)鍵字’，這里主要有2種類型的'方向關(guān)鍵字'。
羅盤角
第一種使用關(guān)鍵字的方式是僅僅聲明一個(gè)方向翼抠，top, bottom, right, left中的某2個(gè)任意搭配咙轩。在這個(gè)例子中 令人恐慌的地方 在于：你聲明了漸近線是從哪個(gè)方向起始的，不是漸近線指向的方向阴颖；也就是 你指定了漸近線的起始位置而不是目標(biāo)方向活喊。所以，如果你想要你的漸進(jìn)方向由從左下角向右上角量愧，你實(shí)際上要聲明的是bottom left:
linear-gradient(bottom left, green 50%, lightblue 50%)
但是bottom left并不等于45度钾菊，除非背景區(qū)域是正方形。如果背景區(qū)域不是正方形偎肃，那么漸近線就從背景區(qū)域的一個(gè)角指向?qū)巧诽蹋⑶疫吔缇€是垂直于漸近線的，就像圖2展示的那樣累颂。同樣的滞详，為了闡述清楚，我也添加了漸近線和中心點(diǎn)喘落。
Figure 2
當(dāng)然茵宪，這就意味著：如果背景區(qū)域在任意方向的尺寸(寬, 高)發(fā)生改變，那么漸近線的角度也會(huì)發(fā)生改變瘦棋。如果背景區(qū)域變得更高或者更窄稀火，漸近線會(huì)逆時(shí)針旋轉(zhuǎn)；變得更矮或者更寬赌朋，漸近線會(huì)順時(shí)針旋轉(zhuǎn)凰狞。這可能正是你所想要的。不同于角度值沛慢，角度值 在背景區(qū)域的尺寸發(fā)生改變時(shí) 漸近線是永遠(yuǎn)不會(huì)旋轉(zhuǎn)的赡若。
第二種使用關(guān)鍵字的方式 看起來是類似的，但是會(huì)有截然不同的結(jié)果团甲。你同樣可以使用top/bottom/left/right某2個(gè)的任意搭配逾冬，但是你需要額外添加關(guān)鍵字to，像下面這樣：
linear-gradient(to top right, green 50%, lightblue 50%)
在這個(gè)例子中躺苦，你在聲明漸近線的目標(biāo)位置身腻，并不是起始位置，這是要清楚的匹厘；畢竟嘀趟，你聲明的是to top right。然而愈诚，當(dāng)你使用這種方式時(shí)她按，你不是指定背景區(qū)域的右上角牛隅。你指定了一個(gè)大致的向上向右的方向。你可以查看在圖3中查看到上例的結(jié)果酌泰；同樣地媒佣，也添加了漸近線。
Figure 3
注意這個(gè)
hard-stop邊界線宫莱，它實(shí)際上從左上角延伸到了右下角(沒有一個(gè)是右上角)丈攒。這是因?yàn)椋涸陉P(guān)鍵字前加上to，你就觸發(fā)了所謂的magic corners行為授霸。當(dāng)你這樣做的時(shí)候，不管背景區(qū)域的尺寸如何改變际插，邊界線總是從左上角延伸到右下角碘耳。這些是‘magic corners’。因此框弛，漸近線并不是指向背景區(qū)域的右上角辛辨，除非背景區(qū)域是完美地正方形 - 此時(shí)漸近線才指向背景區(qū)域的右上角的象限(數(shù)學(xué)中的第一象限)。顯然瑟枫，術(shù)語magic quadrants不比magic corners更合理斗搞。
改變背景區(qū)域的尺寸同樣會(huì)使?jié)u近線 旋轉(zhuǎn)。減少背景區(qū)域的高度 或者 增加背景區(qū)域的寬度 會(huì)使邊界線逆時(shí)針旋轉(zhuǎn)(同樣的漸近線也會(huì)逆時(shí)針旋轉(zhuǎn))慷妙；增加高度 或者 減少寬度 會(huì)使邊界線順時(shí)針旋轉(zhuǎn)(漸近線順時(shí)針旋轉(zhuǎn))僻焚。唯一的不同在于起始狀況。
除此以外膝擂，如果你想要使用關(guān)鍵字 來使 漸近線指向背景區(qū)域的某個(gè)角虑啤，像圖2中的那樣，不要指定目標(biāo)位置(而是應(yīng)該指定起始位置)架馋。同樣地狞山，你也不能聲明一個(gè)起始象限。讓漸近線從某個(gè)角延伸到對(duì)角 意味著：要聲明漸近線的起始位置(圖2)叉寂。如果你想要得到magic corners效果(50%位置的color-stop line從某個(gè)角延伸到對(duì)角萍启，即邊界線從某個(gè)角到對(duì)角)：要聲明目標(biāo)象限(圖3)。
關(guān)于實(shí)際的支持：截止到‘寫這篇文章’為止屏鳍，只有Firefox和Opera支持magic corners勘纯。所有目前的瀏覽器 - 包括IE10 - 支持角度和non-magic關(guān)鍵字，也就是說Opera和Firefox支持2種方式的關(guān)鍵字孕蝉。
這是目前linear gradient有關(guān)事情的狀態(tài)屡律。我有興趣知道：你對(duì)于各種各樣的關(guān)鍵字和行為是如何思考的 - （我知道 理解這2種方式 在開始時(shí) 是有些困難的，因?yàn)?中方式有著截然不同的效果 看起來讓人困惑）降淮。你說呢超埋？
- 本文翻譯自：http://meyerweb.com/eric/thoughts/2012/04/26/lineargradient-keywords/
- 轉(zhuǎn)載請(qǐng)注明出處
