簡介 - Introduction
漸變在網(wǎng)站中常常用到：如果你想使得(按鈕，標題等)有生氣，就可以使用漸變蟀淮。雖然你應(yīng)該盡量少的使用漸變，以免網(wǎng)頁看起來像是圣誕樹一樣钞澳。以往我們常常使用背景圖片來給我們的界面添加漸變效果怠惶，而且這種方式還是可以的，但是這種方式顯得不那么靈活轧粟。因為策治，每次你想要改變漸變的顏色，大小以及漸變的方向時兰吟，你都不得不在圖片編輯軟件中對圖片做修改通惫。
CSS Image Values and Replaced Content Module Level 3允許我們以編程的方式在元素上創(chuàng)建漸變。你可以通過代碼來改變漸變的顏色混蔼，方向等履腋，并且是如此的靈活。例如，你可以在元素上以不同的百分比設(shè)置color stops遵湖；當元素的尺寸發(fā)生改變時悔政，漸變也會做出調(diào)整來適應(yīng)。
在說明書中定義了2種漸變延旧， linear gradients and radial gradients谋国。在前一篇文章中，我們闡述了線性漸變 - CSS3 linear gradients迁沫。這篇文章將關(guān)注于徑向漸變芦瘾。我們將會闡述所有的基礎(chǔ)語法，并會在接近文章尾部的地方集畅，看一下repeating-radial-gradient近弟。
線性漸變語法回顧 - Linear gradient syntax recap
做個回顧，線性漸變的語法其實是相當簡單的：
background-image:linear-gradient(
to bottom right,
rgb(255, 0, 0),
rgb(100, 0, 0) 50%,
rgb(50, 0, 0) 75%,
rgb(150, 0, 0)
);
在括號中挺智，第一行設(shè)置了漸變的方向藐吮，緊接著設(shè)置了一系列的color stops，漸變在這些color stops之間自然地流動逃贝。上面的示例所創(chuàng)建的漸變 如下圖所示：
注意：Oper, Firefox, IE的最新版本全都支持線性漸變的當前語法谣辞，即不用使用前綴，然而基于WebKit的瀏覽器仍然使用舊的語法沐扳。為了兼容舊版本的瀏覽器和基于WebKit的瀏覽器泥从，你應(yīng)該包含帶開發(fā)商前綴。
需要注意的是：
- 帶
to關(guān)鍵字的方向 與 不帶to關(guān)鍵字的方向 之間的區(qū)別沪摄。具體請參考我所翻譯的上篇文章躯嫉。- 當為方向指定角度時，你所使用的角度時羅盤角杨拐。以往的0度是數(shù)學中的0度祈餐，而現(xiàn)在的零度是以背景區(qū)域的中心為起點屏箍，指向豎直向上的方向 為0度仓坞。
完整的代碼示例如下：
background-image:-webkit-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-moz-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-ms-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:-o-linear-gradient(top left, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
background-image:linear-gradient(to bottom right, rgb(255,0,0), rgb(100,0,0) 50%, rgb(50,0,0) 75%, rgb(150,0,0));
徑向漸變語法 - Radial gradient syntax
徑向漸變稍微有點復雜，但是也不需要話費太多時間來適應(yīng)氨距。其語法形式如下：
radial-gradient(
`size shape` at `position`, // `是分隔符屋吨，沒有實際的語意
`colour stops`
);
就像線性漸變一樣蜒谤，Opera，F(xiàn)irefox和IE全都支持最新的‘不帶前綴的徑向漸變語法’至扰△⒒眨基于WebKit-的瀏覽器仍使用舊式的語法(需要帶前綴)。舊式的徑向漸變語法也是使用相同的values敢课，但是形式不同：
radial-gradient(
`position`,
`size and shape`,
`colour stops`
);
所以兼容所有瀏覽器的示例 看起來是 這樣子的：
-webkit-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-moz-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-ms-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
-o-radial-gradient(50% 50%, circle, rgb(75, 75, 200), rgb(0, 0, 75));
radial-gradient(circle at 50% 50%, rgb(75, 75, 200), rgb(0, 0, 75));
上面示例會創(chuàng)建一個柔和的藍色漸變(從元素的中心向外漸變)绷杜，結(jié)果如下圖：
現(xiàn)在讓我們來深入了解下：
postion, size and shape, colour stops。
position
徑向漸變發(fā)散的起始位置position指定了：徑向漸變的中心點的位置(漸變從哪個位置向外發(fā)散)濒募。position位于at后接剩，position可以是關(guān)鍵字和unit values，指定position的方式 和 指定CSS中background-position的方式基本一致萨咳。
circle at left top意味著：把漸變的中心點放置在左上角。
circle at 20% 70%意味著：把漸變的中心點放置在 距離元素左側(cè)20% 距離元素頂部70% 的位置疫稿。
circle at 70px 80px意味著：把漸變的中心點放置在 距離元素左側(cè)70px 距離元素頂部80px 的位置培他。
circle at 0%意味著：把漸變的中心點放置在 元素的左側(cè)邊 垂直居中。如果你只指定了一個值遗座，該值會被認為是水平方向上的值舀凛，垂直方向上的值默認為50%(也就是垂直居中)。
- 如果你沒有為
gradient position設(shè)置任何值途蒋，gradient position會默認為元素的背景區(qū)域的中心猛遍，即是center center或者50% 50%。
size and shape
漸變的size and shape是通過使用 顯式的size和shape關(guān)鍵字組合的方式号坡，或者隱式的size和shape關(guān)鍵字組合的方式 來設(shè)置的懊烤。
Explicit sizes
當使用顯式的size時，你所設(shè)置的2個values 是gradient shape的水平半徑和垂直半徑宽堆。如果你指定了circle關(guān)鍵字 和 一個值腌紧，你會得到一個圓。如果你指定了ellipse關(guān)鍵字和2個值畜隶，或者僅僅指定了2個值壁肋，你會得到一個橢圓。你可以使用任意的CSS units籽慢，只要在它所處的情況中合理即可浸遗，但是你不能使用百分比。
40px circle意味著：使 漸變的形狀是圓的箱亿，而且半徑是40px跛锌。
2em 4em ellipse意味著： 使 漸變的形狀是橢圓，水平方向的半徑是2em届惋，垂直方向的半徑是4em察净。
- 注意：如果你沒有設(shè)置任何值，會設(shè)置
ellipse cover為默認值盼樟。(下面的部分會介紹cover關(guān)鍵字)
Implicit sizes
當使用隱式的size時氢卡，你可以使用若干個不同的關(guān)鍵字。這些關(guān)鍵字指定了：你想讓漸變的形狀circle, ellipse的最外沿接觸到容器的最近角晨缴，最遠角译秦，還是最近邊，最遠邊(最近，最遠都是相對于position的位置而定的)筑悴。在這個示例中们拙，我們使button為正方形，并且設(shè)置漸變中心的位置為：水平35%阁吝，垂直25%砚婆。
closest-side circle at 35% 25%會使?jié)u變的最外沿接觸到 距離漸變中心最近的 元素的那條邊。把circle更換為ellipse突勇，會使?jié)u變的最外沿接觸到 距離漸變中心最近的 元素的那2條邊装盯。你可以使用關(guān)鍵字contain來代替closest-side。
closest-corner circle at 35% 25%會使?jié)u變的最外沿接觸到 距離漸變中心最近的 元素的那個角甲馋。把circle更換為ellipse埂奈，也是同樣的效果。
farthest-side circle at 35% 25%會使?jié)u變的最外沿接觸到 距離漸變中心最遠的 元素的那條邊定躏。把circle更換為ellipse账磺，會使?jié)u變的最外沿接觸到 距離漸變中心最遠的 元素的那2條邊。
farthest-corner circle at 35% 25%會使 漸變的最外沿接觸到 距離漸變中心最遠的 元素的那個角痊远。不管是circle還是ellipse垮抗，你都可以使用關(guān)鍵字cover來代替farthest-corner。
Colour stops
在徑向漸變語法的最后部分碧聪，你可以指定至少2個color stops - 這些color stops指定了沿著漸變方向的不同位置上 是 什么顏色借宵，并且瀏覽器會填充color stops之間的顏色。你可以在沿著漸變方向的不同位置上 使用任意的單位矾削，只要合理即可壤玫。你也可以使用不同的方式指定顏色(16進制顏色值，關(guān)鍵字哼凯，rgb欲间，rgba等等)。每個color stop之間是 使用逗號分隔的断部。
#ff0000, #000000:color stop最簡單的設(shè)置是 只使用2個顏色猎贴。當color stop后 沒指定position時，瀏覽器會 默認第一個color stop在0%位置蝴光，第二個color stop在100%位置(100%即是在最外沿)她渴。
rgb(255,0,0), rgb(150,150,150) 50%, rgb(0,0,0): 這兒我們有3個color stop，并且是使用RGB來設(shè)置顏色的蔑祟。第一個顏色 在漸變方向上的位置為0%趁耗，最后一個顏色 在漸變方向上的位置為100%，但是我們還有一個不同的color stop在50%位置疆虚。
rgb(255,0,0) 20px, rgb(150,150,150) 40px, rgb(0,200,0) 60px, rgb(0,0,0) 80px: 4個color stop苛败，這次使用pixel values在漸變方向上 放置 顏色值满葛。你會發(fā)現(xiàn)：如果你不指定在漸變起始位置和結(jié)束位置上的顏色值，起始位置的顏色值 會采用第一個color stop的顏色值罢屈，同樣地 結(jié)束位置的顏色值 會采用最后一個color stop的顏色值嘀韧。
讓我們來看個實際使用中的示例：
background-image:-webkit-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-moz-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-ms-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:-o-radial-gradient(30% 40%, rgb(255,0,0), rgb(0,0,0));
background-image:radial-gradient(circle at 30% 40%, rgb(255,0,0), rgb(0,0,0));
上面示例的效果(活生生的示例) 如下圖：
當鼠標hover在按鈕上時，按鈕稍微下陷缠捌。當按鈕被點擊時锄贷，它們會深深的陷入。我通過在鼠標的hover曼月，active狀態(tài)下 使用各種inset box shadow來達到效果谊却。
Repeating radial gradients
和線性漸變的方式一樣，你可以通過使用相關(guān)的repeat property 來創(chuàng)建repeating-radial-gradient十嘿。
repeating-radial-gradient僅僅是采用 你為徑向漸變設(shè)置的方式，并重復這個方式 到元素的邊界岳锁。
background:-webkit-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-moz-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-ms-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:-o-repeating-radial-gradient(center, 30px 30px, #009, #0000FA 50%, #009);
background:repeating-radial-gradient(30px circle, #009, #0000FA 50%, #009);
效果如下圖：
總結(jié)- Summary
我希望 這篇文章給了你：在你的設(shè)計中開始使用徑向漸變 所需要知道的所有知識點绩衷！請讓我們知道：你認為Opera's implementation怎么樣 - 回饋總是有幫助的，不論好壞激率？
你在這兒看到的 并不是徑向漸變的使用極限咳燕。你可以 在任何你可以使用圖片的地方 使用徑向漸變，所以你應(yīng)該嘗試在border-image, list-style-image...中 使用徑向漸變乒躺。
- 本文翻譯自：https://dev.opera.com/articles/css3-radial-gradients/
- 轉(zhuǎn)載請注明出處
