如果你熟悉CSS，則可能了解 box-shadow 屬性。但是你知道有一個CSS濾鏡 drop-shadow 可以做類似的事情嗎？就像 box-shadow 一樣，我們可以輸入x-offset、y-offset、模糊半徑和顏色的值。

.my-element {filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2)); }

與 box-shadow 不同，它不需要 spread 參數（稍后會詳細介紹）。

為什么drop-shadow很有用？

如果我們有 box-shadow ，為什么還需要 drop-shadow 呢？

非矩形形狀

使用 drop-shadow 可以讓我們給一個元素添加陰影，這個陰影并不對應于它的邊界框，，而是使用該元素的Alpha蒙版。例如，我們可以在透明的PNG或SVG徽標中添加投影。

img {filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); }

我們可以比較 box-shadow 和 drop-shadow 的效果：

使用 box-shadow 為我們提供了一個矩形陰影，即使元素沒有背景，而 drop-shadow 則為圖像的非透明部分創建陰影。

Demo

無論圖像是內聯在HTML中（作為內聯SVG，還是在 <img> 標簽中）或CSS背景圖像，這都將起作用，這意味著我們還可以為漸變背景添加陰影。這些形狀是通過背景漸變創建的，并應用了 drop-shadow 濾鏡：

<div class="grad"></div> <div class="grad"></div> <div class="grad"></div> .grad {width: 15rem;height: 15rem;margin: 1rem;background: linear-gradient(45deg, deeppink 50%, transparent 50%);filter: drop-shadow(0.6rem 0.6rem 1rem rgba(20, 20, 180, 0.8)); }.grad:nth-child(2) {background: radial-gradient(circle at center, deeppink 50%, transparent 50%); }.grad:nth-child(3) {background: linear-gradient(45deg, transparent 60%, deeppink 60%), linear-gradient(135deg, transparent 60%, deeppink 60%); }

效果

剪裁元素

如果我們使用 clip-path 或 mask-image 修剪或遮罩元素，則我們添加的任何 box-shadow 也會被修剪——因此，如果它在修剪區域之外，則將不可見。

但我們可以通過在元素的父元素上應用 drop-shadow 濾鏡，在剪切的元素上創建一個陰影。相當酷！

parent-element {filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); }.clipped-element {clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, , 50% 50%)) }

drop-shadow 濾鏡應用于剪切形狀的父元素。

查看demo

分組元素

有時候，我需要構建由重疊元素組成的組件，這本身就需要投射陰影。

如果我們在整個組件上添加 box-shadow ，則會留下奇怪的空白區域：

如果我們給每個元素單獨添加一個 box-shadow，那么每個元素都會投下自己的陰影，這可能不是我們想要的效果。我們需要采用一些巧妙的CSS來隱藏那些元素重疊的陰影。

但是通過在整個組件上使用 drop-shadow，我們可以準確地在我們想要的地方得到陰影，而不需要求助于奇技淫巧。

查看demo

多重投射陰影

這是一件有趣的事情：你可以使用多個陰影以獲得一些很酷的效果！查看以下演示。

<div class="parent-element"><div class="clipped-element"></div> </div> .parent-element {filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));transition: filter 600ms; }.parent-element:hover {filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8)); }.clipped-element {width: 20rem;height: 20rem;margin: 0 auto;background-color: deeppink;clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%) }

效果：

附帶說明：過渡和動畫CSS濾鏡的性能并不是特別好，在實際項目中可能最好不要同時制作這么多濾鏡的動畫。不過這個只是為了好玩！

局限性

如上所述， drop-shadow 不包含 spread 參數。這意味著我們目前無法使用它來創建輪廓效果，我認為這將非常有用。例如，如果它被支持，我們可以使用 drop-shadow 在漸變的背景上創建一個輪廓，就像我們在其他元素上使用 box-shadow 或 text-shadow 一樣。

陷阱

即使給定相同的參數， drop-shadow 也無法渲染與 box-shadow 完全相同的陰影效果。我懷疑這與CSS過濾器是基于SVG過濾器原語有關。無論哪種情況，你都可能需要通過稍微調整 drop-shadow 值來補償差異。

瀏覽器支持

所有現代瀏覽器均支持CSS過濾器（包括 drop-shadow）。我傾向于將其作為漸進式增強，而不需要對舊版瀏覽器進行變通，因為它通常不會對用戶體驗造成任何重大影響。但如果你確實需要為舊版瀏覽器提供替代性的樣式，你可以使用特性查詢來實現，并使用 box-shadow 回退。

.my-element > * {box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2); }@supports (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {.my-element {filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));}.my-element > * {box-shadow: none;} }

總結

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調了一些使用 box-shadow的 情況，也許你可以在你的下一個項目中使用它！

---

原文：https://css-irl.info/drop-shadow-the-underrated-css-filter/
翻譯：公眾號《前端全棧開發者》 新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的css矩形凹陷效果_被低估的CSS滤镜：drop-shadow的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。