你可能不知道的 CSS 陰影技巧與細(xì)節(jié)

關(guān)于 CSS 陰影，之前已經(jīng)有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧^[1]，介紹了一些關(guān)于 box-shadow 的用法。

最近一個(gè)新的項(xiàng)目，CSS-Inspiration^[2]，挖掘了其他很多有關(guān) CSS 陰影的點(diǎn)子，是之前的文章沒有覆蓋到的新內(nèi)容，而且有一些很有意思，遂打算再起一篇。

本文的題目是 CSS 陰影技巧與細(xì)節(jié)。CSS 陰影，卻不一定是 box-shadow 與 filter:drop-shadow，為啥？因?yàn)槭褂闷渌麑傩砸部梢阅M陰影，而且是各種各樣的陰影。下面且聽我娓娓道來~

單側(cè)投影

先說單側(cè)投影，關(guān)于 box-shadow，大部分時(shí)候，我們使用它都是用來生成一個(gè)兩側(cè)的投影，或者一個(gè)四側(cè)的投影。如下：

OK，那如果要生成一個(gè)單側(cè)的投影呢？

我們來看看 box-shadow 的用法定義：

{
????box-shadow:?none?|?[inset??&&?[?????????]?]#
}

以 box-shadow: 1px 2px 3px 4px #333 為例，4 個(gè)數(shù)值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴(kuò)張半徑。

這里有一個(gè)小技巧，擴(kuò)張半徑可以為負(fù)值。

繼續(xù)，如果陰影的模糊半徑，與負(fù)的擴(kuò)張半徑一致，那么我們將看不到任何陰影，因?yàn)樯傻年幱皩⒈话谠瓉淼脑刂拢墙o它設(shè)定一個(gè)方向的偏移量。所以這個(gè)時(shí)候，我們給定一個(gè)方向的偏移值，即可實(shí)現(xiàn)單側(cè)投影：

CodePen Demo -- css單側(cè)投影^[3]

投影背景 / 背景動(dòng)畫

接著上面的說。

很明顯，0 = -0，所以當(dāng) box-shadow 的模糊半徑和擴(kuò)張半徑都為 0 的時(shí)候，我們也可以得到一個(gè)和元素大小一樣的陰影，只不過被元素本身遮擋住了，我們嘗試將其偏移出來。

CSS代碼如下：

div?{
????width:?80px;
????height:?80px;
????border:?1px?solid?#333;
????box-sizing:?border-box;
????box-shadow:?80px?80px?0?0?#000;
}

得到如下結(jié)果：

有什么用呢？好像沒什么意義啊。

額，確實(shí)好像沒什么用。不過我們注意到，box-shadow 是可以設(shè)置多層的，也就是多層陰影，而且可以進(jìn)行過渡變換動(dòng)畫（補(bǔ)間動(dòng)畫）。但是 background-image: linear-gradient()，也就是漸變背景是不能進(jìn)行補(bǔ)間動(dòng)畫的。

這又扯到哪里去了。好我們回來，利用上面的特性，我們可以利用 box-shadow 實(shí)現(xiàn)原本只能利用漸變才能實(shí)現(xiàn)的背景圖：

用 box-shadow，實(shí)現(xiàn)它的 CSS 代碼如下（可以更簡(jiǎn)化）：

.shadow?{
????position:?relative;
????width:?250px;
????height:?250px;
}

.shadow::before?{
????content:?"";
????position:?absolute;
????width:?50px;
????height:?50px;
????top:?-50px;
????left:?-50px;
????box-shadow:?
????????50px?50px?#000,?150px?50px?#000,?250px?50px?#000,
????????50px?100px?#000,?150px?100px?#000,?250px?100px?#000,
????????50px?150px?#000,?150px?150px?#000,?250px?150px?#000,
????????50px?200px?#000,?150px?200px?#000,?250px?200px?#000,
????????50px?250px?#000,?150px?250px?#000,?250px?250px?#000;
}

用漸變來實(shí)現(xiàn)的話，只需要這樣：

.gradient?{
????width:?250px;
????height:?250px;
????background-image:?linear-gradient(90deg,?#000?0%,?#000?50%,?#fff?50%,?#fff?100%);
????background-size:??100px?100px;
}

為什么選擇更為復(fù)雜的 box-shadow 呢？因?yàn)樗梢赃M(jìn)行補(bǔ)間動(dòng)畫，像這樣，這是使用漸變做不到的：

CodePen Demo -- box-shadow實(shí)現(xiàn)背景動(dòng)畫 ^[4]

當(dāng)然，這只是個(gè)示例 Demo，運(yùn)用點(diǎn)想象力還有很多有意思的效果，再貼一個(gè)：

CodePen Demo -- CSS Checker Illusion( By David Khourshid )^[5]

嗯，很有意思，就是實(shí)際用途可能不大。

立體投影

好，我們繼續(xù)。下一個(gè)主題是立體投影。

這個(gè)說法很奇怪，陰影的出現(xiàn)，本就是為了讓原本的元素看起來更加的立體，那這里所謂的立體投影，是個(gè)怎么立體法？

這里所謂的立體投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我們使用其他元素或者屬性模擬元素的陰影。而這樣做的目的，是為了能夠突破 box-shadow 這類元素的一些定位局限。讓陰影的位置、大小、模糊度可以更加的靈活。

OK，讓我們來看看，這樣一個(gè)元素，我們希望通過自定義陰影的位置，讓它更加立體：

上圖 div 只是帶了一個(gè)非常淺的 box-shadow ，看上去和立體沒什么關(guān)系，接下來，我們通過 div 的偽元素，給它生成一個(gè)和原圖邊角形狀類似的圖形，再通過 transform 位移一下，可能是這樣：

OK，最后對(duì)這個(gè)用偽元素生成的元素進(jìn)行一些虛化效果（filter或者box-shadow都可以），就可以實(shí)現(xiàn)一個(gè)邊角看起來像被撕開的立體效果：

代碼非常簡(jiǎn)單，偽 CSS 代碼示意如下：

div?{
????position:?relative;
????width:?600px;
????height:?100px;
????background:?hsl(48,?100%,?50%);
????border-radius:?20px;
}

div::before?{
????content:?"";
????position:?absolute;
????top:?50%;
????left:?5%;
????right:?5%;
????bottom:?0;
????border-radius:?10px;
????background:?hsl(48,?100%,?20%);
????transform:?translate(0,?-15%)?rotate(-4deg);
????transform-origin:?center?center;
????box-shadow:?0?0?20px?15px?hsl(48,?100%,?20%);
}

所以總結(jié)一下：

• 立體投影的關(guān)鍵點(diǎn)在于利于偽元素生成一個(gè)大小與父元素相近的元素，然后對(duì)其進(jìn)行 rotate 以及定位到合適位置，再賦于陰影操作
• 顏色的運(yùn)用也很重要，陰影的顏色通常比本身顏色要更深，這里使用 hsl 表示顏色更容易操作，l 控制顏色的明暗度

還有其他很多場(chǎng)景：

CodePen Demo -- 立體投影^[6]

文字立體投影 / 文字長陰影

上面的立體效果在文字上就完全不適用了，所以對(duì)待文字的立體陰影效果，還需要另辟蹊徑。

正常而言，我們使用 text-shadow 來生成文字陰影，像這樣：

<div>?Txt?Shadowdiv>
-----
div?{
????text-shadow:?6px?6px?3px?hsla(14,?100%,?30%,?1);
}

嗯，挺好的，就是不夠立體。那么要做到立體文字陰影，最常見的方法就是使用多層文字陰影疊加。

Tips：和 box-shadow 一樣，text-shadow 是可以疊加多層的！但是對(duì)于單個(gè)元素而言， drop-shadow 的話就只能是一層。

好，上面的文字，我們?cè)囍B加個(gè) 50 層文字陰影試一下。額，50 層手寫，其實(shí)很快的~

好吧，手寫真的太慢了，還容易出錯(cuò)，所以這里我們需要借助一下 SASS/LESS 幫忙，寫一個(gè)生成 50 層陰影的 function 就好，我們每向右和向下偏移 1px，生成一層 text-shadow：

@function makeLongShadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

div {
    text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}

上面的 SCSS 代碼。經(jīng)過編譯后，就會(huì)生成如下 CSS：

div?{
??????text-shadow:?0px?0px?#992400,?1px?1px?#992400,?2px?2px?#992400,?3px?3px?#992400,?4px?4px?#992400,?5px?5px?#992400,?6px?6px?#992400,?7px?7px?#992400,?8px?8px?#992400,?9px?9px?#992400,?10px?10px?#992400,?11px?11px?#992400,?12px?12px?#992400,?13px?13px?#992400,?14px?14px?#992400,?15px?15px?#992400,?16px?16px?#992400,?17px?17px?#992400,?18px?18px?#992400,?19px?19px?#992400,?20px?20px?#992400,?21px?21px?#992400,?22px?22px?#992400,?23px?23px?#992400,?24px?24px?#992400,?25px?25px?#992400,?26px?26px?#992400,?27px?27px?#992400,?28px?28px?#992400,?29px?29px?#992400,?30px?30px?#992400,?31px?31px?#992400,?32px?32px?#992400,?33px?33px?#992400,?34px?34px?#992400,?35px?35px?#992400,?36px?36px?#992400,?37px?37px?#992400,?38px?38px?#992400,?39px?39px?#992400,?40px?40px?#992400,?41px?41px?#992400,?42px?42px?#992400,?43px?43px?#992400,?44px?44px?#992400,?45px?45px?#992400,?46px?46px?#992400,?47px?47px?#992400,?48px?48px?#992400,?49px?49px?#992400,?50px?50px?#992400;
}

看看效果：

額，很不錯(cuò)，很立體。但是，就是丑，而且說不上來的奇怪。

問題出在哪里呢，陰影其實(shí)是存在明暗度和透明度的變化的，所以，對(duì)于漸進(jìn)的每一層文字陰影，明暗度和透明度應(yīng)該都是不斷變化的。這個(gè)需求，SASS 可以很好的實(shí)現(xiàn)，下面是兩個(gè) SASS 顏色函數(shù)：

• fade-out 改變顏色的透明度，讓顏色更加透明
• desaturate 改變顏色的飽和度值，讓顏色更少的飽和

關(guān)于 SASS 顏色函數(shù)，可以看看這里：Sass基礎(chǔ)—顏色函數(shù)^[7]

我們使用上面兩個(gè) SASS 顏色函數(shù)修改一下我們的 CSS 代碼，主要是修改上面的 makeLongShadow function 函數(shù)：

@function makelongrightshadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $color: fade-out(desaturate($color, 1%), .02);
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}

好，看看最終效果：

嗯，大功告成，這次順眼了很多~

CodePen Demo -- 立體文字陰影^[8]

當(dāng)然，使用 CSS 生成立體文字陰影的方法還有很多，下面再貼出一例，使用了透明色疊加底色的多重線性漸變實(shí)現(xiàn)的文字立體陰影，感興趣的同學(xué)可以去看看具體實(shí)現(xiàn)：

線性漸變配合陰影實(shí)現(xiàn)條紋立體陰影條紋字^[9]

長投影

上面提到了通過多層陰影疊加實(shí)現(xiàn)文字的立體陰影。運(yùn)用在 div 這些容器上也是可以的。當(dāng)然這里還有一種挺有意思的方法。假設(shè)我們，有一個(gè)矩形元素，希望給他添加一個(gè)長投影，像下面這樣：

要生成這種長投影，剛剛說的疊加多層陰影可以，再就是借助元素的兩個(gè)偽元素，其實(shí)上面的圖是這樣的：

關(guān)鍵點(diǎn)在于，我們通過對(duì)兩個(gè)偽元素的 transform: skew() 變換以及從實(shí)色到透明色的背景色變化，實(shí)現(xiàn)了長投影的效果：

CodePen Demo -- 線性漸變模擬長陰影^[10]

彩色投影

通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成的陰影通常只能是單色或者同色系的。

你這么說，難道還可以生成漸變色的陰影不成？

額，當(dāng)然不行。

這個(gè)真不行，但是通過巧妙的利用 filter: blur 模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。

假設(shè)我們有下述這樣一張頭像圖片：

下面就利用濾鏡，給它添加一層與原圖顏色相仿的陰影效果，核心 CSS 代碼如下：

.avator?{
????position:?relative;
????background:?url($img)?no-repeat?center?center;
????background-size:?100%?100%;
????
????&::after?{
????????content:?"";
????????position:?absolute;
????????top:?10%;
????????width:?100%;
????????height:?100%;
????????background:?inherit;
????????background-size:?100%?100%;
????????filter:?blur(10px)?brightness(80%)?opacity(.8);
????????z-index:?-1;
????}
}

看看效果：

其簡(jiǎn)單的原理就是，利用偽元素，生成一個(gè)與原圖一樣大小的新圖疊加在原圖之下，然后利用濾鏡模糊 filter: blur() 配合其他的亮度/對(duì)比度，透明度等濾鏡，制作出一個(gè)虛幻的影子，偽裝成原圖的陰影效果。

嗯，最重要的就是這一句 filter: blur(10px) brightness(80%) opacity(.8); 。

CodePen Demo -- filter create shadow^[11]

使用 box-shadow 實(shí)現(xiàn)的燈光效果

好，上文主要是一些實(shí)現(xiàn)各種陰影的方法，接下來是效果篇。先來看看使用 box-shadow實(shí)現(xiàn)的一些燈光效果。

box-shadow 實(shí)現(xiàn)霓虹氖燈文字效果

這個(gè)效果也叫 Neon，Codepen 上有很多類似的效果，本質(zhì)上都是大范圍的 box-shadow 過渡效果與白色文字的疊加：

CodePen Demo -- box-shadow實(shí)現(xiàn)霓虹氖燈文字效果^[12]

使用box-shadow實(shí)現(xiàn)陰影燈光show

和上面的效果類似，本質(zhì)上都是多重陰影的過渡效果，或許再來點(diǎn) 3D 效果？

合理搭配，效果更佳：

CodePen Demo -- 使用box-shadow實(shí)現(xiàn)陰影燈光show^[13]

使用 drop-shadow | box-shadow 實(shí)現(xiàn)單標(biāo)簽抖音 LOGO

嗯哼，既然標(biāo)題叫你所不知道的 CSS 陰影技巧與細(xì)節(jié)，那么本文也應(yīng)該有一點(diǎn)奇技淫巧。

先來看這個(gè)，單個(gè)標(biāo)簽實(shí)現(xiàn)仿抖音 LOGO，當(dāng)然由于限定在一個(gè)元素，所以細(xì)節(jié)方面還是有很多瑕疵。

想著仿的緣由是某天刷抖音的時(shí)候看見這個(gè) LOGO 的一時(shí)興起，CSS 寫多了，看見什么東西都會(huì)條件反射的想這個(gè)能不能用 CSS 實(shí)現(xiàn)。

我們先來看看抖音的 LOGO：

其實(shí)很簡(jiǎn)單，主體其實(shí)是由3個(gè)顏色不同類似 J 的形狀組成。而單獨(dú)拎出一個(gè)，又可以把它分成四分之三圓、|以及?組成。

正好，一個(gè)元素加上它的兩個(gè)偽元素，剛好可以湊成這三個(gè)形狀，我們?cè)囍鴮?shí)現(xiàn)以下，簡(jiǎn)單 CSS 代碼如下：

---
div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;

    &::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border: 37px solid #fff;
        border-top: 37px solid transparent;
        border-radius: 50%;
        top: 123px;
        left: -137px;
        transform: rotate(45deg);
    }
    
        &::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 30px solid #fff;
        border-right: 30px solid transparent;
        border-top: 30px solid transparent;
        border-left: 30px solid transparent;
        top: -100px;
        right: -172px;
        border-radius: 100%;
        transform: rotate(45deg);
    }
}

上面的代碼就可以生成整個(gè)形狀的主體：

接下來就是輪到 ?filter: drop-shadow() 登場(chǎng)，它可以在元素呈現(xiàn)之前，為元素的渲染提供一些效果，最常見的也就用它渲染整體陰影。我們通常會(huì)用它來實(shí)現(xiàn)對(duì)話框的小三角與整個(gè)對(duì)話框的陰影效果，像下面這樣，左邊是使用 drop-shadow 的效果，右邊是使用普通 box-shadow的效果。

本文假定讀者已經(jīng)了解了 drop-shadow 的基本用法，上圖效果來自這里：CodePen Demo -- Drop-shadow vs box-shadow (2) By Kseso^[14]

OK，回到我們正文，下面我們使用 filter: drop-shadow() 生成它的第一層左邊的藍(lán)色陰影，添加在主體 div：

div?{
????position:?relative;
????width:?37px;
????height:?218px;
????background:?#fff;
????filter:drop-shadow(-10px?-10px?0?#24f6f0);

???&::before,
???&::after?{
????...
????}
}

得到如下效果：

好，接下來我們只需要再添加一層紅色 filter: drop-shadow() 在右側(cè)就大功告成！

等等！哪里不對(duì)，上面我也有提到過， 和 box-shadow 一樣，text-shadow 是可以疊加多層的！但是對(duì)于單個(gè)元素而言， drop-shadow 的話就只能是一層。

也就是說，無法在 div 上再使用 filter: drop-shadow() 生成另一側(cè)的紅色投影，不過還好，我們還有兩個(gè)偽元素的filter: drop-shadow() 以及 box-shadow 還沒有用上，經(jīng)過一番嘗試：

div {
    position: relative;
    width: 37px;
    height: 218px;
    background: #fff;
    filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
    box-shadow: 11.6px 10px 0 0 #fe2d52;
    
    &::before {
        ....
        filter: drop-shadow(16px 0px 0 #fe2d52);
    }
    
    &::after {
        ....
        filter:drop-shadow(14px 0 0 #fe2d52);
    }
}

我們分別再利用 div 的 box-shadow 以及兩個(gè)偽元素的 filter: drop-shadow() ，在單個(gè)標(biāo)簽的限制下，最終結(jié)果如下：

CodePen Demo -- 單標(biāo)簽實(shí)現(xiàn)抖音LOGO^[15]

總結(jié)一下：

• 主要借助了兩個(gè)偽元素實(shí)現(xiàn)了整體結(jié)構(gòu)，借助了 drop-shadow 生成一層整體陰影
• drop-shadow 只能是單層陰影，所以另一層陰影需要多嘗試
• contrast(150%) brightness(110%) 則可以增強(qiáng)圖像的對(duì)比度和亮度，更貼近抖音LOGO的效果

更新于 2018-11-9

關(guān)于上述抖音 LOGO，經(jīng)友人提醒，其實(shí)應(yīng)該只是兩個(gè)類 J 形的形狀重疊在一起，重疊部分為白色，非重疊部分為各自原色。

當(dāng)初想復(fù)雜了，這個(gè)效果我嘗試了一下，使用 CSS 的混合模式 mix-blend-mode 也是可以實(shí)現(xiàn)的，下面給出實(shí)現(xiàn)方法如下，感興趣的同學(xué)可以看看：

CodePen Demo -- 使用 mix-blend-mode 實(shí)現(xiàn)抖音 LOGO^[16]

當(dāng)然，關(guān)于 CSS 陰影還有很多有意思的技巧和細(xì)節(jié)，本文限于篇幅不再一一羅列。

我在 Git 上開了個(gè)倉庫，CSS-Inspiration^[17]，以分類的形式，展示不同 CSS 屬性或者不同的課題使用 CSS 來解決的各種方法。更多有意思的 CSS 技巧可以在這里找到，而且是每日更新。

最后

感謝耐心讀完。更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS^[18] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料