如何使用 CSS 創建投影

儘管設計趨勢每年都在變化，但您可以指望使用主要的陰影效果（如框陰影和陰影）對網站的美感做出積極貢獻。您可以使用陰影來創建令人愉悅、精美的渲染效果，而不會顯得俗氣。

讓我們仔細看看 CSS drop-shadow屬性。

什麼是 CSS 陰影？

drop-shadow()是一種 CSS 效果，可在指定對象的形狀周圍顯示陰影。這是應用 CSS drop-shadow的語法。

Syntax: filter: drop-shadow(offset-x offset-y blur-radius color);

過濾器函數範圍很廣，包括blur()、brightness()和drop-shadow()。

offset-x確定水平距離，offset-y確定垂直距離。請注意，負值將陰影放置在對象的左側 ( offset-x ) 和上方 ( offset-y )。

最後兩個參數是可選的。您可以將陰影的模糊半徑指定為長度。默認情況下，它被設置為 0。你不能有一個負的模糊半徑。

陰影的顏色指定為 。如果您尚未指定顏色，則它遵循顏色屬性的值。

CSS 陰影何時有用？

您可能已經知道box-shadow可以很好地完成這項工作。所以，你可能會想，為什麼我們需要陰影？在很多情況下，drop-shadow()函數是一個救星。讓我們來看看其中的一些：

非矩形形狀

與box-shadow不同，您可以為非矩形形狀添加陰影。例如，我們有一個具有非矩形形狀的透明 SVG 或 PNG，例如一個星形。在這裡，添加對應於對象本身的陰影可以通過box-shadow或drop-shadow 完成。考慮兩種情況：

HTML

CSS

.star-img img { display: inline-block; height: 15em; width: 25em; } .box-shadow { color: red; box-shadow: 0.60em 0.60em 0.2em; } .drop-shadow { filter: drop-shadow(0.60em 0.60em 0.2em); }

輸出：

比較這兩種效果時，很明顯box-shadow給出了矩形陰影；圖像是透明的還是已經擁有背景也無關緊要。另一方面，drop-shadow允許您創建符合圖像本身形狀的陰影。

限制因素是drop-shadow()函數接受除inset關鍵字和spread參數之外的所有類型參數。

分組元素

有幾種情況，您可能需要通過重疊某些元素來構建組件。如果您使用box-shadow，您將面臨嘗試以正確方式投射陰影的問題。以下是對圖像和文本組件進行分組時的工作方式：

HTML

Live in the moment

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.

基本CSS

body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } h2 { font-size: 2rem; } p { font-size: 0.8rem; } .parent-container { display: flex; flex-direction: column; height: 17rem; width: 50em; } .image-container img { width: 15em; position: absolute; z-index: 1; top: 2em; left: 1.5em; } .text-container { color: rgb(255, 236, 236); background-color: rgb(141 0 35); width: 30rem; padding: 3rem; align-self: flex-end; position: relative; }

現在，應用box-shadow和drop-shadow以查看差異。

.drop-shadow { filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5)); } .box, .box img { box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3); }

輸出：

如您所見，box-shadow 分別應用於每個元素，而drop-shadow將它們組合在一起並應用陰影。

剪輯元素

您可以使用clip-path屬性來裁剪確定應顯示圖像或元素的哪些部分的特定區域。該下拉陰影過濾器允許我們創建一個下拉陰影將其應用到該元素的父元素剪裁上：

HTML

CSS

.parent-container { filter: drop-shadow(0rem 0rem 1.5rem maroon); } .clipped-element { width: 50em; height: 50em; margin: 0 auto; background-image: url(smiling-girl.jpg); clip-path: circle(50%); background-size: cover; background-repeat: no-repeat; }

輸出：

我們用圓形路徑裁剪了 50% 的圖像。因此，陰影過濾器僅應用於圖像的可見部分。是不是很棒？

限制和差異

正如我們上面討論的，drop-shadow不支持spread參數。這意味著使用drop-shadow()函數創建輪廓效果是不可能的，因為它在任何地方都會被殺死。此外，它呈現與box-shadow和text-shadow不同的陰影效果（具有相同的參數）。您可能會覺得box-shadow和drop-shadow之間的差異歸結為CSS Box Model。一個跟隨它而另一個沒有。下面是一個例子：

HTML

Every MUO article will bring you one step closer.

Every MUO article will bring you one step closer.

Every MUO article will bring you one step closer.

基本CSS

body { padding: 5em 1em; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .parent-container { width: 72rem; } p { font-size: 3em; font-style: bold; }

應用陰影效果

.drop-shadow { filter: drop-shadow(0.5em 0.5em 0.1em #555); } .box-shadow { box-shadow: 0.5em 0.5em 0.1em #555; } .text-shadow { text-shadow: 0.5em 0.5em 0.1em #555; }

輸出：

你可以看到box-shadow比text-shadow和drop-shadow產生更重、更暗的陰影。此外，text-shadow和drop-shadow之間的陰影位置略有不同。不過，您可能會根據自己的要求更喜歡不同的陰影效果。

瀏覽器支持

該下拉陰影（）函數在所有現代瀏覽器支持除了舊的瀏覽器如Internet Explorer。雖然這不會嚴重妨礙用戶體驗，但您可以添加帶有box-shadow回退的功能查詢。

嘗試不同的陰影效果

由於用例眾多，box-shadow的流行非常明顯。然而，drop-shadow()函數未被充分利用。我們希望您能嘗試不同的陰影效果，並嘗試在您未來的項目中實現投影。

偽類為 CSS 和您的個人 Web 開發曲目添加了全新的功能範圍。了解更多關於他們的信息，成為一名更熟練、更高效的 Web 開發人員。