摘要：線性漸變不過它稍稍有些復(fù)雜。在講解徑向漸變之前，我們先來(lái)看一看比較簡(jiǎn)單的線性漸變。再來(lái)看徑向漸變好的，接下來(lái)我們來(lái)看徑向漸變。但對(duì)徑向漸變來(lái)說，顧名思議，所有色標(biāo)是排布在一條半徑上的。

邊框是我們美化網(wǎng)頁(yè)、增強(qiáng)樣式最常用的手段之一。例如：

    .text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

但有些時(shí)候，我們的需求是給一個(gè)容器加上多重邊框，最容易想到的是給它多加一層標(biāo)簽：

    



.text-outborder {
    width: 274px;
    height: 274px;
    border: 10px solid #03D766;
}

.text {
    margin: auto;
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

不過有些時(shí)候，我們可能無(wú)法修改結(jié)構(gòu)，或者修改結(jié)構(gòu)的成本很高，此時(shí)就需要我們?cè)诩?CSS 層面解決這個(gè)問題。

這時(shí)候可以通過 outline 屬性來(lái)解決：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 10px solid #BC9E9C;
}

描邊有一個(gè)好處在于，它跟邊框類似，可以設(shè)置各種線型，比如虛線：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
    outline: 5px dashed #CE843B;
}

有趣的是，還有一個(gè) outline-offset 屬性，可以控制描邊的偏移量。

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: 10px;
}

我們可以把 outline 擴(kuò)展出去：

而且 outline-offset 還支持負(fù)值，可以將 outline 疊加在 border 之上:

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    outline: 5px dashed #FFF;
    outline-offset: -12px;
}

利用這個(gè)特性可以玩出很多好玩的效果。

不過描邊有一個(gè)缺陷——如果這個(gè)容器本身有圓角的話，描邊并不能完全貼合圓角。目前所有瀏覽器的行為都是這樣的：

如果你需要使用圓角，那么你就得另尋它法了。接著，我們又想到了 box-shadow 屬性：

我們通常是這樣設(shè)置投影的：

box-shadow: 0 5px 5px #000;

前面三個(gè)長(zhǎng)度值，再加一個(gè)顏色值。

前兩個(gè)長(zhǎng)度值分別表示投影在水平和垂直方向上的偏移量，第三個(gè)長(zhǎng)度值表示投影的模糊半徑（也就是模糊的程度）；顏色值就是投影的顏色。

如果我們把前三個(gè)值都設(shè)為零，實(shí)際上是沒有任何效果的。因?yàn)槿绻队凹床黄埔膊荒：瑒偤脮?huì)被這個(gè)元素自己嚴(yán)嚴(yán)實(shí)實(shí)地遮住。

很多人可能不知道的是，投影還可以有第四個(gè)長(zhǎng)度值。這個(gè)值表示投影向外擴(kuò)張的程度：

box-shadow: 0 0 0 10px #FF0000;

這樣，投影就會(huì)從元素的底下露出一圈了。

關(guān)于投影，另外一個(gè)不是每個(gè)人都知道的特性是，投影屬性其實(shí)可以接受一個(gè)列表，我們可以一次賦予它多層投影，像這樣：

.text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 20px solid #03D766;
    border-radius: 50px;
    box-shadow: 
        0 0 0 10px #FB0000,
        0 0 0 20px #FBDD00, 
        0 0 0 30px #00BDFB;
}

這樣我們就得到了超過兩層的 “邊框” 效果了。

投影的另外一個(gè)好處是，它的擴(kuò)張效果是根據(jù)元素自己的形狀來(lái)的。如果元素是矩形，它擴(kuò)張開來(lái)就是一個(gè)更大的矩形；如果元素有圓角，它也會(huì)擴(kuò)張出圓角。

由于描邊和投影都是不影響布局的，所以如果這個(gè)元素和其它元素的相對(duì)位置關(guān)系很重要，就需要我們以外邊距等方式來(lái)為這些多出來(lái)的 “邊框” 騰出位置，以防被其它元素蓋住。

因此，從這個(gè)意義上來(lái)說，使用內(nèi)嵌投影似乎是更好的選擇。因?yàn)閮?nèi)嵌投影讓投影出現(xiàn)在元素內(nèi)部，我們可以用內(nèi)邊距在元素的內(nèi)部消化掉這些額外 “邊框” 所需要的空間，處理起來(lái)更容易一些。

標(biāo)簽頁(yè)我們都很熟悉了，它是一種常用的 UI 元素。

我們把它拉近來(lái)看一看：

這個(gè)標(biāo)簽還是比較美觀的，我們用圓角讓它看起來(lái)很接近真實(shí)的標(biāo)簽造型。不過我們也注意到，它底部的兩個(gè)直角看起來(lái)似乎有點(diǎn)生硬。

所以設(shè)計(jì)師原本期望的效果可能是這樣的：
][14]

這樣就自然多了。但這看起來(lái)似乎很難實(shí)現(xiàn)啊！

我們的難點(diǎn)主要在這里：

這個(gè)特殊的形狀如何實(shí)現(xiàn)？

我們把它放大來(lái)看一下：

首先我們可能會(huì)想到用圖片。這當(dāng)然是可行的，但圖片有種種局限，我們最好還是完全用 CSS 來(lái)實(shí)現(xiàn)它。

好，接下來(lái)我們來(lái)分析一下它的形狀。它其實(shí)就是一個(gè)方形，再挖掉一個(gè) 90° 的扇形。于是我們?cè)囍鴦?chuàng)建一個(gè)方形，再用背景色做出一個(gè)扇形疊加上去：

看起來(lái)好像可以了。但這是騙人的啊！

把它放在復(fù)雜背景下，立馬就露餡了——扇形部分不是透明的：

所以，我們的問題就變成了如何用CSS實(shí)現(xiàn)內(nèi)凹圓角。

對(duì)于普通外凸的圓角，我們都已經(jīng)非常熟悉了，我們用圓角屬性就可以得到：

但我們需要的是一個(gè)內(nèi)凹的圓角形狀。

這是一個(gè)實(shí)實(shí)在在的需求，于是有開發(fā)者曾經(jīng)提議，擴(kuò)展圓角屬性，讓它支持負(fù)值。如果是負(fù)值，圓角就不再是外凸的，而是內(nèi)凹的。這個(gè)提議聽起來(lái)似乎很有道理，語(yǔ)法設(shè)計(jì)也很緊湊。

但實(shí)際上它的語(yǔ)義不夠準(zhǔn)確。因此 CSS 工作組并沒有接受這個(gè)提議，并未將它納入標(biāo)準(zhǔn)。

這條路走不通，我們還需要繼續(xù)探索。

我們順著這個(gè)方向，頭腦中很自然地會(huì)迸出這個(gè)疑問：CSS中還有和圓形有關(guān)的屬性嗎？

答案當(dāng)然是有！

“徑向漸變” 特性就是跟圓形有關(guān)的。

不過它稍稍有些復(fù)雜。在講解徑向漸變之前，我們先來(lái)看一看比較簡(jiǎn)單的 “線性漸變”。

說到漸變，那自然需要有一個(gè)容器。然后，還需要有兩種顏色。漸變的顏色設(shè)置我們稱之為 “色標(biāo)”——每個(gè)色標(biāo)不僅有顏色信息，還有位置信息。

我們給起點(diǎn)和終點(diǎn)的色標(biāo)分別設(shè)置顏色，就可以得到一條漸變圖案：

接下來(lái)，關(guān)于漸變，我們其實(shí)可以設(shè)置不止兩個(gè)色標(biāo)。比如我們可以在中央再增加一個(gè)色標(biāo)。請(qǐng)注意我們特意選擇了跟起點(diǎn)色標(biāo)一樣的顏色。我們得到的效果如下：

我們發(fā)現(xiàn)，漸變只發(fā)生在顏色不同的色標(biāo)之間。如果兩個(gè)色標(biāo)的顏色相同，則它們之間會(huì)顯示為一塊實(shí)色。

好的，我們繼續(xù)增加色標(biāo)。這次我們?cè)跐u變地帶的中央增加一個(gè)色標(biāo)，且讓它的顏色和終點(diǎn)色標(biāo)相同：

根據(jù)上面的經(jīng)驗(yàn)，這個(gè)結(jié)果正是我們所預(yù)料的——漸變只發(fā)生在顏色不同的色標(biāo)之間。

接下來(lái)，我們玩點(diǎn)更特別的，我們把中間的兩個(gè)色標(biāo)相互靠近直至重合，會(huì)發(fā)生什么？

實(shí)際上這個(gè)漸變也會(huì)趨向于零。也就是說，雖然這本質(zhì)上仍然是一個(gè) “漸變” 圖案，但經(jīng)過我們的精心設(shè)計(jì)之后，我們最終得到了兩個(gè)純色的色塊條紋。

如果我們把終點(diǎn)顏色換為透明色……

我們甚至還會(huì)得到實(shí)色和透明色間隔的條紋。

好的，接下來(lái)我們來(lái)看徑向漸變。它稍稍有些復(fù)雜，但原理是一樣的。

同樣，我們需要有一個(gè)容器。但對(duì)徑向漸變來(lái)說，顧名思議，所有色標(biāo)是排布在一條半徑上的。也就是說，我們還需要有一個(gè)圓心。默認(rèn)情況下，圓心就是這個(gè)容器的正中心：

而這條半徑就是圓心指向容器最遠(yuǎn)端的一條假想的線：

接下來(lái)，我們要設(shè)置一些色標(biāo)：

說到這里，就要講解一下徑向漸變的特別之處。所有色標(biāo)的顏色變化推進(jìn)不是像線性漸變那樣平行推進(jìn)的，而是以同心圓的方式向外擴(kuò)散的——就像水池里被石子激起的漣漪那樣。

看到這個(gè)色標(biāo)的分布，我們應(yīng)該可以想像出線性漸變的結(jié)果是什么；但這里我們把它按照徑向漸變的特征來(lái)推演一下，實(shí)際上最終的效果是這樣的：

我們把所有輔助性的標(biāo)記都去掉，只留下漸變圖案：

這是一個(gè)穿了個(gè)窟窿的實(shí)色背景。很好玩是吧？不過不要忘了我們是為什么來(lái)到這兒的——我們是為了得到一個(gè)內(nèi)凹圓角的形狀。

細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)了，我們需要的東西已經(jīng)出現(xiàn)了：

接下來(lái)，我們調(diào)整一下圓心的位置和容器的尺寸，就可以得到這個(gè)內(nèi)凹圓角的造型了。

具體代碼例子如下：

.text {
    width: 254px;
    height: 254px;
    background:
      -moz-radial-gradient(
          100% 0%, 
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 71%,
          #0059FF 0%;
      );
}

利用這個(gè)技巧，我們用純 CSS 最終實(shí)現(xiàn)了這個(gè)看似不可能的 “圓潤(rùn)的標(biāo)簽頁(yè)” 效果！

原文鏈接：https://github.com/cssmagic/blog/issues/54#rd