于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于 box-shadow 的用法。

最近一個新的項目，CSS-Inspiration，挖掘了其他很多有關 CSS 陰影的點子，是之前的文章沒有覆蓋到的新內容，而且有一些很有意思，遂打算再起一篇。

本文的題目是 CSS 陰影技巧與細節。CSS 陰影，卻不一定是 box-shadow 與 filter:drop-shadow，為啥？因為使用其他屬性也可以模擬陰影，而且是各種各樣的陰影。下面且聽我娓娓道來~

單側投影

先說單側投影，關于 box-shadow，大部分時候，我們使用它都是用來生成一個兩側的投影，或者一個四側的投影。如下：

OK，那如果要生成一個單側的投影呢？

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

{ box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#}

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

這里有一個小技巧，擴張半徑可以為負值。

繼續，如果陰影的模糊半徑，與負的擴張半徑一致，那么我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量。所以這個時候，我們給定一個方向的偏移值，即可實現單側投影：

CodePen Demo — css單側投影（https://codepen.io/Chokcoco/pen/pergRb）

投影背景 / 背景動畫

接著上面的說。

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

CSS代碼如下：

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

得到如下結果：

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

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

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

用 box-shadow，實現它的 CSS 代碼如下（可以更簡化）：

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

用漸變來實現的話，只需要這樣：

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

為什么選擇更為復雜的 box-shadow 呢？因為它可以進行補間動畫，像這樣，這是使用漸變做不到的：

CodePen Demo — box-shadow實現背景動畫（https://codepen.io/Chokcoco/pen/WaBYZL）

當然，這只是個示例 Demo，運用點想象力還有很多有意思的效果，再貼一個：

CodePen Demo — CSS Checker Illusion( By David Khourshid )（https://codepen.io/davidkpiano/pen/LVzxPV）

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

立體投影

好，我們繼續。下一個主題是立體投影。

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

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

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

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

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

代碼非常簡單，偽 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%);}

所以總結一下：

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

還有其他很多場景：

CodePen Demo — 立體投影（https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100）

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

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

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

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

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

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

好，上面的文字，我們試著疊加個 50 層文字陰影試一下。額，50 層手寫，其實很快的~

好吧，手寫真的太慢了，還容易出錯，所以這里我們需要借助一下 SASS/LESS 幫忙，寫一個生成 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 代碼。經過編譯后，就會生成如下 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, 10px10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px50px #992400;}

看看效果：

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

問題出在哪里呢，陰影其實是存在明暗度和透明度的變化的，所以，對于漸進的每一層文字陰影，明暗度和透明度應該都是不斷變化的。這個需求，SASS 可以很好的實現，下面是兩個 SASS 顏色函數：

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

關于 SASS 顏色函數，可以看看這里：Sass基礎—顏色函數

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

@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 — 立體文字陰影（https://codepen.io/Chokcoco/pen/JmgNNa）

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

線性漸變配合陰影實現條紋立體陰影條紋字（https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100）

長投影

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

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

關鍵點在于，我們通過對兩個偽元素的 transform: skew() 變換以及從實色到透明色的背景色變化，實現了長投影的效果：

CodePen Demo — 線性漸變模擬長陰影（https://codepen.io/Chokcoco/pen/qJvVGy）

彩色投影

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

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

額，當然不行。

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

當然，關于 CSS 陰影還有很多有意思的技巧和細節，本文限于篇幅不再一一羅列。

.時髦的雙影

要創建此效果，文本將被賦予兩個硬陰影，沒有模糊半徑。第一個陰影被賦予背景顏色并被放置在文本附近，第二個陰影被賦予文本顏色并且放置的距離大于文本中的第一個陰影。

CSS

color: #dfdfdf;
text-shadow: 4px 4px 0px #000, 
 -4px 0 0px #000,
 7px 4px 0 #fff;

22.彩色陰影

在這個演示中，每個字母都有不同顏色漸變的陰影，使它看起來非常令人印象深刻。

HTML

<p>
 <span id="y">Y</span>
 <span id="o">O</span>
 <span id="u">U</span
</p>

CSS

color: #dfdfdf;
#y {
 text-shadow: 0 1px 2px #75b663,
 1px 3px 1px #5ea04b, 
 2px 5px 1px #5b9c49, 
 4px 7px 1px #518b41, 
 6px 9px 1px #477939,
 8px 11px 1px #3d6831,
 10px 13px 1px #335729,
 12px 15px 1px #294521,
 14px 17px 1px #1e3418;
}
#o {
 text-shadow: 0 1px 2px #9d64c4,
 1px 3px 1px #9759c0, 
 2px 5px 1px #8b46b9, 
 4px 7px 1px #7d3fa6, 
 6px 9px 1px #6f3894,
 8px 11px 1px #613181,
 10px 13px 1px #532a6f,
 12px 15px 1px #45235c,
 14px 17px 1px #381c4a;
}
#u {
 text-shadow: 0 1px 2px #c48564,
 1px 3px 1px #c07d59, 
 2px 5px 1px #b96e46, 
 4px 7px 1px #a6633f, 
 6px 9px 1px #945838,
 8px 11px 1px #814d31,
 10px 13px 1px #6f422a,
 12px 15px 1px #5c3723,
 14px 17px 1px #4a2c1c;
}

3.陷落的文本

實際上，您可以使用CSS使文本看起來像在本演示中所做的那樣。它的方向和位置使用transform 屬性進行更改， 并給出不同的陰影組，使其看起來更自然。

HTML

<p data-text='FALLEN'>FALLEN</p>

CSS

p {
 transform: skew(40deg)rotate(-10deg)rotateX(50deg)translate3d(0, 0, 0);
 -webkit-perspective: 100px;
 perspective: 100px;
}
p::before {
 text-shadow: 0 2px 3px #747474, 
 -3px 3px 1px #222, 
 -6px 5px 1px #474747, 
 -9px 7px 1px #747474,
 -12px 9px 1px #565656,
 -15px 11px 1px #343434,
 -22px 15px 1px #171717;
}
p:before,
p:after {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 content: attr(data-text)
}
p:after {
 color: #edc;
}

4.多個彩色陰影

這是通過使用藍色和粉紅色的兩個遠距離陰影創建的多文本陰影效果的另一個令人印象深刻的示例。

CSS

color: #474747; 
 
text-shadow: 20px 10px 0px #ff99cc,
 -15px -6px 0px #64a5b7; 

5.淘汰文本

這是淘汰文本的一個示例，它允許通過它可以看到它的背景。使用text-shadow 和 mix-blend-mode屬性創建此效果 。

渴望了解更多有關淘汰文本的信息？訪問鏈接 如何使用CSS創建Knockout Text 并學習創建不同類型的挖空文本效果。

HTML

<div id="parent">
 <p>Hey there!</p>
</div>

CSS

div {
 background: url('https://www.dl.dropboxusercontent.com/s/rv0tbpx6fmtr4vi/texture.jpg') repeat;
 padding: 10px;
}
p {
 padding: 30px;
 mix-blend-mode: multiply;
 text-shadow: 5px 4px 11px rgb(0,0,0), 0 2px 5px rgb(0,0,0);
 text-align: center;
}

結論

文本陰影在網站中廣泛使用，并且很容易實現。您可以直接選擇本文中給出的任何文本陰影并增強您的設計。您還可以通過提供不同顏色和其他變化來創建自己的顏色，從這些陰影中獲取想法。我們很快就會發布一篇文章，討論創建這里給出的文本效果的提示和技巧。

整理不易，請大家多多關注支持我，謝謝！

SS3技術提供了大量增強用戶界面的屬性。這些屬性可以對界面元素實現外觀和行為上明顯的調整。從本篇文章開始，小海前端（頭條號）就帶領小伙伴們一同學習CSS3關于增強用戶界面的屬性。

承接文章：CSS技術中一直被遺忘的屬性，了解的都已成了Web大神，你知道嗎？

技術等級：中級 | 適合有一定的CSS基礎的人士閱讀。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

CSS3所提供的增強用戶界面的屬性以及與此相關的屬性比較多，小海前端（頭條號）將分幾次對其進行講解。所包含的所有增強用戶界面的屬性包括：

• box-shadow

• box-sizing

• overflow-x

• overflow-y

• resize

• outline

• outline-width

• outline-style

• outline-color

• outline-offset

• pointer-events

• user-select

• appearance

• content

• counter-increment

• counter-reset

• quotes

本篇文章先來為大家講解第一個增強用戶界面屬性：塊級元素的陰影box-shadow。

一、認識box-shadow屬性：

對塊級元素實現陰影效果，可以增強塊級元素的視覺感受，讓整個塊級元素有凸顯出頁面的感覺，是現代頁面設計中常用的手法。在代碼中，要想對塊級元素實現陰影效果，可以使用CSS 3提供的下列屬性。

CSS3 技術使用box-shadow屬性設置塊級元素的陰影

該屬性可以通過一系列的取值來綜合設置塊級元素的陰影效果。W3C規定該屬性的取值格式如下：

格式：box-shadow: h-shadow v-shadow blur spread color inset/outset;

上述格式中描述的各個取值的含義如下：

• h-shadow，必須，陰影水平方向的偏移量。

• v-shadow，必須，陰影垂直方向的偏移量。

• blur，陰影的邊緣柔滑半徑。

• spread，陰影的擴展半徑。

• color，陰影的顏色。

• inset/outset，內外陰影切換。

二、設置陰影的偏移量：

box-shadow屬性的取值有兩個必須要設置的參數，即h-shadow和v-shadow。這兩個參數可以取負值。

• 參數h-shadow，取值為正值時，陰影水平向右發生偏移；取值為負值時，陰影水平向左發生偏移。

• 參數v-shadow，取值為正值時，陰影垂直向下發生偏移；取值為負值時，陰影垂直向上發生偏移。

若box-shadow只有這兩個參數取值，則可以在塊級元素背面產生一個陰影，并發生一定量的位置偏移，但不會產生邊緣的柔化效果。

例1：為一個div塊級元素設置陰影，水平偏移和垂直偏移均為5px，陰影的邊緣柔滑半徑為10px，陰影不具備擴展，陰影顏色為#aaaaaa。

div{box-shadow: 5px 5px 10px 0 #aaaaaa;}

請小伙伴們為該div塊級元素同時設置背景顏色、邊框效果、圓角效果，觀察其陰影效果的實現。

當h-shadow和v-shadow兩個參數的取值均為0時，就可以為塊級元素設置發光效果。若設置發光效果的同時再配合擴展功能，可以讓發光效果更加明顯。

例2：為一個div塊級元素設置發光，陰影的邊緣柔滑半徑為10px，陰影具備10像素的擴展功能，陰影顏色為#ff5857。

div{box-shadow: 0 0 10px 10px #ff5857;}

上述代碼作用在div塊級元素上之后的效果如下圖所示。

例2的最終顯示效果：利用box-shadow屬性模擬發光效果

三、設置投影效果與內陰影效果：

box-shadow屬性的最后一個參數可以取值為inset或outset，其默認值為outset，表示外陰影，也就是我們看到的“投影”效果。當該參數取值為inset時，陰影將投射到塊級元素的內部，被稱為“內陰影”效果。

例3：為一個div塊級元素設置內陰影，水平偏移和垂直偏移均為5px，陰影的邊緣柔滑半徑為10px，陰影不具備擴展，陰影顏色為#ff5857。

div{box-shadow: 5px 5px 10px 0 #ff5857 inset;}

上述代碼作用在div塊級元素上之后的效果如下圖所示。

例3的最終顯示效果：利用box-shadow屬性設置內陰影

四、設置多組陰影效果同時作用

box-shadow屬性允許設置多組陰影效果同時作用于一個塊級元素。這里，可以利用陰影的水平/垂直偏移量來設置一組陰影只出現在塊級元素的一個邊方向上，則4個邊方向上可以設置四組不同的陰影效果，以達到同時作用的功能。

格式：box-shadow: shadow1,shadow2,shadow3,shadow4;

例4：查看下列CSS代碼。

div{

width: 300px; height: 200px;

border: solid 1px #aaaaaa;

border-radius: 15px;

box-shadow: 0 -10px 10px 0 #ff0000,

10px 0 10px 0 #00ff00,

0 10px 10px 0 #0000ff,

-10px 0 10px 0 #ff00ff;

}

上述代碼中，為一個div標記設置了寬度和高度，還設置了一個圓角邊框。此外，在設置box-shadow屬性時，利用逗號隔開了四組陰影屬性的取值。該組代碼的外觀如下圖所示。

例4的最終顯示效果

這里來分析這四組陰影屬性的取值：

（1）第一組：0 -10px 10px 0 #ff0000

這一組為紅色（#ff0000）陰影，水平方向不偏移，垂直方向向上偏移10px，最后產生10px的邊緣柔滑效果?？傊?，第一組代碼在塊級元素的上方形成了紅色的陰影。

（2）第二組：10px 0 10px 0 #00ff00

這一組為綠色（#00ff00）陰影，水平方向向右偏移10px，垂直方向不偏移，最后產生10px的邊緣柔滑效果。總之，第二組代碼在塊級元素的右方形成了綠色的陰影。

（3）第三組：0 10px 10px 0 #0000ff

這一組為綠色（#0000ff）陰影，水平方向不偏移，垂直方向向下偏移10px，最后產生10px的邊緣柔滑效果。總之，第三組代碼在塊級元素的下方形成了藍色的陰影。

（4）第四組：-10px 0 10px 0 #ff00ff

這一組為品紅色（#ff00ff）陰影，水平方向向左偏移10px，垂直方向不偏移，最后產生10px的邊緣柔滑效果。總之，第四組代碼在塊級元素的左方形成了品紅色的陰影。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

文章預告

明天的文章中，繼續為大家講解CSS3中有關增強用戶界面的屬性。重點為大家講解box-sizing屬性的使用，這將涉及到頁面布局時盒模型尺寸的計算方法，希望正在研究頁面布局的小伙伴們一定不要錯過。