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

CocoaChina 發布于2019-08-02 15:54 / 957人閱讀

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

border

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


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

不過有些時候，我們可能無法修改結構，或者修改結構的成本很高，此時就需要我們在純 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

GPU云服務器云服務器內凹圓云服務器那些事服務器如何做內網云盤 boxshadow

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54332.html

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

摘要：線性漸變不過它稍稍有些復雜。在講解徑向漸變之前，我們先來看一看比較簡單的線性漸變。再來看徑向漸變好的，接下來我們來看徑向漸變。但對徑向漸變來說，顧名思議，所有色標是排布在一條半徑上的。 border 邊框是我們美化網頁、增強樣式最常用的手段之一。例如： .text { width: 254px; height: 254px; background-co...

libin19890520 2019-08-30 13:03 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

lily_wang 2019-06-27 16:28 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

chengjianhua 2019-08-29 12:35 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

Anonymous1 2019-08-20 16:31 評論0 收藏0
2017年2月份前端資源分享

平日學習接觸過的網站積累，以每月的形式發布。2017年以前看這個網址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用擴展JavaScript語法記錄 - 掉坑初期工具漢字拼音轉換...

dreamtecher 2019-08-01 16:51 評論0 收藏0