使用box-shadow和drop-shadow怎么實現不規則的投影

使用box-shadow和drop-shadow怎么實現不規則的投影？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

當我們想給一個矩形或其他能用 border-radius 生成的形狀（在“自適應的橢圓”一節中可以看到一些示例）加投影時，box-shadow 的表現都堪稱完美。但是，當元素添加了一些偽元素或半透明的裝飾之后，它就有些力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括：

• 半透明圖像、背景圖像、或者 border-image（比如老式的金質像框）；

• 元素設置了點狀、虛線或半透明的邊框，但沒有背景（或者當background-clip 不是 border-box 時）；

• 對話氣泡，它的小尾巴通常是用偽元素生成的；

如果我們打算對這類元素直接應用 box-shadow，那只能得到不完全投影的結果。難道我們只能完全放棄投影效果嗎？有沒有辦法可以解決這個難題？

濾鏡效果規范（http://w3.org/TR/filter-effects）為這個問題提供了一個解決方案。它引入了一個叫作 filter 的新屬性，這個屬性也是從 SVG 那里借鑒過來的。盡管 CSS 濾鏡基本上就是 SVG 濾鏡，但我們并不需要掌握任何SVG 知識。相反，只需要一些函數就可以很方便地指定濾鏡效果了，比如blur()、grayscale() 以及我們需要的 drop-shadow() ！如果你喜歡，甚至可以把多個濾鏡串連起來，只要用空格把它們分隔開就可以了，比如：

filter: blur() grayscale() drop-shadow();

drop-shadow() 濾鏡可接受的參數基本上跟 box-shadow 屬性是一樣的，但不包括擴張半徑，不包括 inset 關鍵字，也不支持逗號分割的多層投影語法。舉個例子，上面的投影：

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

可以這樣來寫：

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

CSS 濾鏡最大的好處在于，它們可以平穩退化：當瀏覽器不支持時，不會出現問題，只不過沒有任何效果而已。如果你確實需要這個效果在盡可能多的瀏覽器中顯示出來，可以同時附上一個 SVG 濾鏡，這樣可以得到稍微好一些的瀏覽器支持度。你可以在濾鏡效果規范（http://www.w3.org/TR/filter-effects/）中為每個濾鏡函數找到對應的 SVG 濾鏡版本。你可以把 SVG濾鏡和簡化的 CSS 濾鏡放在一起使用，讓層疊機制來決定哪一行最終生效：

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

不幸的是，如果 SVG 濾鏡是存放在一個獨立文件里的，那它就無法像一個簡潔易用的函數那樣在 CSS 代碼中進行隨意配置；如果它是內聯的，則又會攪亂你的代碼。參數需要寫死在文件內部，因此每當我們新加一種哪怕是大同小異的投影效果時，都需要多準備一個文件，這顯然是難以接受的。當然，我們還可以使用 data URI（它也會省掉額外的 HTTP 請求），但這個方法仍然會帶來文件體積的增長。總的來說，這個方法只是一種回退方案，因此只要我們把SVG 濾鏡控制在一定數量以內，哪怕它們的效果大同小異，也是說得過去的。

另外一件需要牢記的事情就是，任何非透明的部分都會被一視同仁地打上投影，包括文本（如果背景是透明的），正如我們剛剛看到的那樣。你可能會想，是不是可以通過 text-shadow: none; 來取消掉文本上的投影呢？其實 text-shadow 跟它是完全不相干的兩碼事，因此這樣做并不能取消文本上的 drop-shadow() 效果。此外，如果你已經用 textshadow在文本上加了投影效果，文本投影還會被 drop-shadow() 濾鏡再加上投影，這本質上是給投影打了投影！看看下面這段示例代碼（請原諒它慘不忍睹的效果，這樣只是為了凸顯這個怪異的問題）：

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);

你可以看到它的渲染效果，圖中的文字被同時打上了 textshadow和 drop-shadow()。

看完上述內容，你們掌握使用box-shadow和drop-shadow怎么實現不規則的投影的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！