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

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

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

但有些時候，我們的需求是給一個容器加上多重邊框，最容易想到的是給它多加一層標簽：

    



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

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

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

這時候可以通過 outline 屬性來解決：

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

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

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

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

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

我們可以把 outline 擴展出去：

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

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

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

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

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

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

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

前面三個長度值，再加一個顏色值。

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

如果我們把前三個值都設(shè)為零，實際上是沒有任何效果的。因為如果投影即不偏移也不模糊，剛好會被這個元素自己嚴嚴實實地遮住。

很多人可能不知道的是，投影還可以有第四個長度值。這個值表示投影向外擴張的程度：

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

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

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

.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;
}

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

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

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

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

標簽頁我們都很熟悉了，它是一種常用的 UI 元素。

我們把它拉近來看一看：

這個標簽還是比較美觀的，我們用圓角讓它看起來很接近真實的標簽造型。不過我們也注意到，它底部的兩個直角看起來似乎有點生硬。

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

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

我們的難點主要在這里：

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

我們把它放大來看一下：

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

好，接下來我們來分析一下它的形狀。它其實就是一個方形，再挖掉一個 90° 的扇形。于是我們試著創(chuàng)建一個方形，再用背景色做出一個扇形疊加上去：

看起來好像可以了。但這是騙人的啊！

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

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

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

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

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

但實際上它的語義不夠準確。因此 CSS 工作組并沒有接受這個提議，并未將它納入標準。

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

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

答案當然是有！

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

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

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

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

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

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

好的，我們繼續(xù)增加色標。這次我們在漸變地帶的中央增加一個色標，且讓它的顏色和終點色標相同：

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

接下來，我們玩點更特別的，我們把中間的兩個色標相互靠近直至重合，會發(fā)生什么？

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

如果我們把終點顏色換為透明色……

我們甚至還會得到實色和透明色間隔的條紋。

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

同樣，我們需要有一個容器。但對徑向漸變來說，顧名思議，所有色標是排布在一條半徑上的。也就是說，我們還需要有一個圓心。默認情況下，圓心就是這個容器的正中心：

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

接下來，我們要設(shè)置一些色標：

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

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

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

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

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

接下來，我們調(diào)整一下圓心的位置和容器的尺寸，就可以得到這個內(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%;
      );
}

利用這個技巧，我們用純 CSS 最終實現(xiàn)了這個看似不可能的 “圓潤的標簽頁” 效果！

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