內容疊加是當今網站製作方式的重要組成部分。他們讓你如何使用 Box-Shadow 僅使用 CSS 疊加效果，再次顯示它，並在其後面顯示更多信息或控件，如按鈕。
典型的疊加層是半透明的，具有純色背景，通常是黑色的。它還具有用戶可以看到或使用的文本或按鈕。在交互（點擊或懸停）之後，疊加層消失並顯示下面的內容。
在本文中，我們將了解如何使用純 CSS 為圖像添加彩色疊加層。在下面的演示中，您可以看到一切的結果。將鼠標移到圖片上以查看疊加層上的口袋妖怪。儘管這篇文章是關於圖像的，但它展示的技術可以安全地用於其他類型的內容，例如文本塊。
如何使用 Box-Shadow 實現純 CSS 疊加效果
使用 CSS box-shadow 創建分層陰影
您可以通過用逗號分隔它們的值來將多個陰影堆疊在一起。此技術可用於創建平滑融入頁面的有趣陰影。請注意，並未添加散佈值——在這種情況下並不真正需要它，但最終，由您決定框陰影的外觀。
如果我們將偏移和模糊半徑設置為 0px並為一個陰影添加一個散佈值，我們將為該框添加一個邊框。由於這個邊框在技術上是一個陰影，因為父元素中的框沒有佔用額外的空間。
使用 CSS box-shadow 創建霓虹燈陰影
現實生活中的陰影通常是黑色或灰色，具有不同程度的不透明度。但是如果陰影有顏色呢?
在現實世界中，您可以通過改變光源的顏色來獲得彩色陰影。網站上沒有等同於變化的“真實”光源，因此您可以通過更改 box-shadow 的顏色值來獲得這種霓虹燈效果。
使用 CSS box-shadow 創建神經形態陰影
這種效果獨特且視覺上令人愉悅。它來自擬物化，它試圖完全複製物體在現實生活中的樣子。鏈接文章中有一些關於擬物化的示例
我們需要創建的前兩個效果處理看似漂浮在頁面上方並在背景上投射陰影的平面 Web 組件。這種效果使這些組件看起來像是從頁面中擠出來的。
FAQ
How do you overlay a box in CSS?
指定“容器”的寬度和高度“ 班級。將位置設置為“相對”並添加邊距屬性。將“box”類的寬度和高度都設置為“100%”。使用“絕對”值指定位置。 …通過使用 z-index、margin 和 background 屬性來設置“overlay”類的樣式。
如何僅在底部 CSS 上獲得框陰影?
要在圖像底部顯示陰影，使用“box-shadow”屬性。為此，offset-x設置為“0”，offset-y為任意正值，你想要顯示的顏色也設置好。
CSS支持box shadow嗎?
box-shadow CSS 屬性在元素的框架周圍添加陰影效果。您可以設置以逗號分隔的多個效果。盒陰影由相對於元素的 X 和 Y 偏移、模糊和擴散半徑以及顏色描述。