巧用drop-shadow，拯救不開心

說到頁面效果，陰影是很小的元素，不多被說起。

固然，面試的時候，仍是有人會問你：擴展半徑和模糊半徑。

在設計師的眼裏，也仍是會糾結：範圍太大、顏色過重之類的問題。

咱們簡單列一下。

最經常使用——box-shadow

box-shadow說來很簡單。

代碼以下：

.box-shadow{
  width: 50px;
  height: 50px;
  background: rgb(123, 199, 123);
  border-radius: 4px;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, .5);
}
複製代碼

效果以下：

這是最常規的實現，咱們能夠任意修改陰影的偏移值和半徑、顏色，達到咱們想要的效果。

但有時咱們會遇到這樣的效果，

乍一看，也很普通，但你會發現，當咱們按照常規寫法去寫陰影的時候，它會出現三種可能狀況：

• 偏移量很小，四邊都有陰影
• 單側偏移較大，三邊有陰影
• 兩側偏移都達到必定值，相鄰兩邊有陰影，對邊沒有

好像都不是這張圖的效果？它僅有一邊有陰影，何解？

若是你從未遇到過這種需求，可能就會打個問號，不賣關子，上關鍵代碼：

.box-shadow-single{
  box-shadow: 0 8px 5px -5px rgba(0, 0, 0, .7);
}
複製代碼

能夠看到，咱們將陰影的擴展半徑寫成了負值。僅此而已麼，它是怎麼作到的呢？

不妨來看看瀏覽器是怎麼製造陰影的。咱們把代碼改爲這樣：

box-shadow: 0px 55px 0px 0px rgba(0, 0, 0, .7);
複製代碼

盒子背後的祕密被暴露了出來，

哇偶，原來它只是在咱們盒子的背後繪製了一個如出一轍的形狀：

• 改變模糊半徑，它會從邊緣到中心逐漸變模糊
• 改變擴展半徑，會改變它的大小

看到這裏，你應該明白了什麼，從上圖可看出，陰影的初始大小跟元素徹底吻合，那麼，給予它一個單邊的偏移值，再給它負的擴展半徑，它就能成爲一個——三邊都躲在元素背後，只有一邊露出來的單邊陰影~

(發現長得有點像U盤，哈哈)

你必定想嘗試，模糊半徑負值會怎樣？嗯，它沒了...

次經常使用——text-shadow

說text-shadow次經常使用，是由於它涉及到必定特效，常規字體通常是不須要的，什麼樣的效果呢？好比：

這樣的效果在一些活動頁是少不了的，由於純色會顯得太素，視覺效果適當地豐富，能使得用戶更興奮。實現代碼以下：

.textshadow{
  color: #FFF;
  text-shadow: 0 0 2px #000,0 0 10px gold;
}
複製代碼

固然，這只是小試牛刀，不過，咱們能夠看出，text-shadow只有四個值供設置，分別是X、Y方向的偏移和模糊半徑、色值。還反應另外一點是，能夠寫多重陰影的效果，這就爲咱們創造出更多效果提供了可能。譬如：

3D

text-shadow: 0 1px #808d93,
   	       -1px 0 #cdd2d5,
   	       -1px 2px #808d93,
   	       -2px 1px #cdd2d5,
   	       -2px 3px #808d93,
   	       -3px 2px #cdd2d5,
   	       -3px 4px #808d93,
   	       -4px 3px #cdd2d5,
   	       -4px 5px #808d93;
複製代碼

火焰

text-shadow: 0 0 20px #fefcc9,
            10px -10px 30px #feec85,
            -20px -20px 40px #ffae34,
            20px -30px 35px #ec760c,
            -20px -40px 40px #cd4606,
            0 -50px 65px #973716,
            10px -70px 70px #451b0e;
複製代碼

你可能會說，這樣的場景不多，不實用。我贊成，但創意並不必定很經常使用，還能夠體現可能性。

drop-shadow,拯救不開心

主角終於登場，怎麼叫不開心？常規方法忽然不適用，束手無策的時候。

先來看一個以前分享過的效果——漸變字體。

代碼：

background: linear-gradient(to bottom, #f44e30 0%,#29db35 100%); 
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
複製代碼

效果：

這個時候，咱們可能還須要給它加個投影，就像這樣

你會想到什麼呢？box-shadow？

好尷尬...

text-shadow？

這是剛從煤窩裏爬出來嗎？

爲何？咱們再次揭開謎底吧。

將代碼改一下

text-shadow: 0 10px 0px rgba(0,0,0,.9);
複製代碼

咱們看到似曾相識的一幕

跟box-shadow相似，text-shadow在字體自己的位置上，繪製了一個同樣形狀的圖層，只不過，這裏有個層級的問題，正常狀況下，陰影在字體後，而當咱們把字體填充色設置爲transparent，用它來裁剪背景時，陰影就蓋到了背景之上，這樣就得不到咱們想要的效果。

因此，無解？

有我的不答應——drop-shadow

試一下，將代碼改爲

filter:drop-shadow(0 6px 2px rgba(0,0,0,.9));
複製代碼

nice！

故事到這裏，固然沒有結束。

這裏的陰影若是沒有實現，只能算小挫折，大不了咱不要了...（若是設計師放過你的話~）

曾經的我呢，也僅僅是知道了這個方法能夠解決上面的問題，並未深究，直到有一天...

仍是先看問題：

這個效果你必定作過，也不難，不過這個呢？

對，只是加了個陰影，可是，經過前面的內容咱們知道，這個陰影確定不能用box-shadow，它將會是這樣：

甚至有看到不少開源的庫都是這樣寫的，不知出於什麼考慮。

咱們曾經用drop-shadow解決了上面的問題，能夠故技重施嗎？答案是：能夠。

只須要在氣泡容器上加這行樣式便可：

filter:drop-shadow(0 4px 2px rgba(0,0,0,.4));
複製代碼

那麼，它是怎麼作到的？能夠來體會一句話：

box-shadow會應用到元素矩形的邊框盒子，而drop-shadow()濾鏡會應用到元素透明的輪廓，應用範圍包括阿爾法透明度，保持陰影與輪廓吻合，或者給經過clip-path剪切的元素添加陰影。

慢慢體會，對於上面發生的一切，你可能就豁然開朗了。

固然，你不要犯我犯過的錯，不能點到爲止，你須要明白的是，它不僅能解決這個問題，而是可以應對這一類問題，適用於幾乎全部不規則形狀的投影，相信你會遇到的~

除此以外，它還有另外一個優點，你們知道，box-shadow的渲染比較耗瀏覽器的性能，特別是在有動畫的時候，drop-shadow很好地緩解了這個問題，因此，它十分值得被你選用。

那麼drop-shadow是否是能夠替代box-shadow呢？惋惜並不能。相比box-shadow，它少了兩項技能：

一、擴展半徑，它的效果總會是模糊的，沒法繪製出box-shadow那種實線

二、沒法應用多重陰影

儘管如此，它已經足夠出色了不是嗎？

你必定還有更多技巧和創意，歡迎交流！~

原文首發於我的博客：巧用drop-shadow，拯救不開心