border、outline、boxshadow那些事以及如何作內凹圓

border

邊框是咱們美化網頁、加強樣式最經常使用的手段之一。例如：

<div class="text"></div>
    .text {
    width: 254px;
    height: 254px;
    background-color: #33AAE1;
    border: 10px solid #03D766;
}

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

<div class="text-outborder">
    <div class="text"></div>
</div>

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

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

不過有些時候，咱們可能沒法修改結構，或者修改結構的成本很高，此時就須要咱們在純 CSS 層面解決這個問題。

outline

這時候能夠經過 outline 屬性來解決：

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

描邊有一個好處在於，它跟邊框相似，能夠設置各類線型，好比虛線：

.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-offset 還支持負值，能夠將 outline 疊加在 border 之上:

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

利用這個特性能夠玩出不少好玩的效果。

不過描邊有一個缺陷——若是這個容器自己有圓角的話，描邊並不能徹底貼合圓角。目前全部瀏覽器的行爲都是這樣的：

box-shadow

若是你須要使用圓角，那麼你就得另尋它法了。接着，咱們又想到了 box-shadow 屬性：

咱們一般是這樣設置投影的：

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

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

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

若是咱們把前三個值都設爲零，其實是沒有任何效果的。由於若是投影即不偏移也不模糊，恰好會被這個元素本身嚴嚴實實地遮住。

box-shadow第四個長度值

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

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

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

關於投影，另一個不是每一個人都知道的特性是，投影屬性其實能夠接受一個列表，咱們能夠一次賦予它多層投影，像這樣：

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

這樣咱們就獲得了超過兩層的 「邊框」 效果了。

投影的另一個好處是，它的擴張效果是根據元素本身的形狀來的。若是元素是矩形，它擴張開來就是一個更大的矩形；若是元素有圓角，它也會擴張出圓角。

注意事項

因爲描邊和投影都是不影響佈局的，因此若是這個元素和其它元素的相對位置關係很重要，就須要咱們之外邊距等方式來爲這些多出來的 「邊框」 騰出位置，以防被其它元素蓋住。

所以，從這個意義上來講，使用內嵌投影彷佛是更好的選擇。由於內嵌投影讓投影出如今元素內部，咱們能夠用內邊距在元素的內部消化掉這些額外 「邊框」 所須要的空間，處理起來更容易一些。

內凹圓

標籤頁咱們都很熟悉了，它是一種經常使用的 UI 元素。

咱們把它拉近來看一看：

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

因此設計師本來指望的效果多是這樣的：
][14]

這樣就天然多了。但這看起來彷佛很難實現啊！

咱們的難點主要在這裏：

這個特殊的形狀如何實現？

咱們把它放大來看一下：

首先咱們可能會想到用圖片。這固然是可行的，但圖片有種種侷限，咱們最好仍是徹底用 CSS 來實現它。

好，接下來咱們來分析一下它的形狀。它其實就是一個方形，再挖掉一個 90° 的扇形。因而咱們試着建立一個方形，再用背景色作出一個扇形疊加上去：

看起來好像能夠了。但這是騙人的啊！

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

如何實現內凹圓角

因此，咱們的問題就變成了如何用CSS實現內凹圓角。

對於普通外凸的圓角，咱們都已經很是熟悉了，咱們用圓角屬性就能夠獲得：

但咱們須要的是一個內凹的圓角形狀。

這是一個實實在在的需求，因而有開發者曾經提議，擴展圓角屬性，讓它支持負值。若是是負值，圓角就再也不是外凸的，而是內凹的。這個提議聽起來彷佛頗有道理，語法設計也很緊湊。

但實際上它的語義不夠準確。所以 CSS 工做組並無接受這個提議，並未將它歸入標準。

這條路走不通，咱們還須要繼續探索。

咱們順着這個方向，頭腦中很天然地會迸出這個疑問：CSS中還有和圓形有關的屬性嗎？

答案固然是有！

徑向漸變

「徑向漸變」 特性就是跟圓形有關的。

線性漸變

不過它稍稍有些複雜。在講解徑向漸變以前，咱們先來看一看比較簡單的 「線性漸變」。

說到漸變，那天然須要有一個容器。而後，還須要有兩種顏色。漸變的顏色設置咱們稱之爲 「色標」——每一個色標不只有顏色信息，還有位置信息。

咱們給起點和終點的色標分別設置顏色，就能夠獲得一條漸變圖案：

接下來，關於漸變，咱們其實能夠設置不止兩個色標。好比咱們能夠在中央再增長一個色標。請注意咱們特地選擇了跟起點色標同樣的顏色。咱們獲得的效果以下：

咱們發現，漸變只發生在顏色不一樣的色標之間。若是兩個色標的顏色相同，則它們之間會顯示爲一塊實色。

好的，咱們繼續增長色標。此次咱們在漸變地帶的中央增長一個色標，且讓它的顏色和終點色標相同：

根據上面的經驗，這個結果正是咱們所預料的——漸變只發生在顏色不一樣的色標之間。

接下來，咱們玩點更特別的，咱們把中間的兩個色標相互靠近直至重合，會發生什麼？

實際上這個漸變也會趨向於零。也就是說，雖然這本質上仍然是一個 「漸變」 圖案，但通過咱們的精心設計以後，咱們最終獲得了兩個純色的色塊條紋。

若是咱們把終點顏色換爲透明色……

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

再來看徑向漸變

好的，接下來咱們來看徑向漸變。它稍稍有些複雜，但原理是同樣的。

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

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

接下來，咱們要設置一些色標：

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

看到這個色標的分佈，咱們應該能夠想像出線性漸變的結果是什麼；但這裏咱們把它按照徑向漸變的特徵來推演一下，實際上最終的效果是這樣的：

咱們把全部輔助性的標記都去掉，只留下漸變圖案：

這是一個穿了個窟窿的實色背景。很好玩是吧？不過不要忘了咱們是爲何來到這兒的——咱們是爲了獲得一個內凹圓角的形狀。

細心的朋友可能已經發現了，咱們須要的東西已經出現了：

接下來，咱們調整一下圓心的位置和容器的尺寸，就能夠獲得這個內凹圓角的造型了。

內凹圓具體代碼例子

具體代碼例子以下：

.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 最終實現了這個看似不可能的 「圓潤的標籤頁」 效果！

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