為什麼嵌入框陰影無法在圖像上工作，以及如何修復它？

插入框陰影不與圖像重疊：解決了一個困境

插入框陰影是在網頁設計中創建深度和重點的強大工具。然而，當應用於圖像時，它可能會遇到挑戰。本文研究了為什麼 inset box-shadow 不適用於圖像，並提出了使用 CSS :after 偽元素的解決方案。

問題

將 inset box-shadow 應用於包含以下內容的容器時圖像時，陰影可能不會出現在圖像本身上。相反，陰影只會影響容器的背景。這會產生影像漂浮在陰影上方的錯覺。

說明

這種行為的原因在於網頁瀏覽器的渲染機制。內嵌框陰影應用於元素的背景，通常是純色或漸層。當圖像放置在元素內時，瀏覽器會將圖像視為具有自己獨立背景的單獨元素。因此，嵌入的框陰影不會影響影像的背景。

解：CSS :after 偽元素

為了克服這個挑戰，我們可以利用 :after 偽元素。透過在容器中新增 :after 偽元素並對其應用 inset box-shadow，我們可以建立一個覆蓋圖像的新圖層。

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

此 CSS 程式碼建立一個 :after 偽元素與容器具有相同的寬度和高度。它絕對位於容器內並放置在頂部。插入框陰影套用於 :after 偽元素，確保它與影像重疊。

以上是為什麼嵌入框陰影無法在圖像上工作，以及如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！