了解圖像上的插入框陰影問題

在網頁設計中，使用插入框陰影在元素內創建深度和尺寸是一種常見技術。然而，在處理包含圖像的容器時，事情並不總是那麼簡單。當嵌入框陰影似乎在嵌入影像上消失時，就會出現問題。

隱形陰影的情況

考慮原始問題中提供的範例：

body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

雖然目標是在容器（包括映像）周圍套用嵌入框陰影，但它無法顯示。為什麼會出現這種情況？

影像透明度問題

影像陰影缺失的原因在於透明度。當影像具有透明背景時，它本質上是背景元素的視窗。在這種情況下，容器的背景是黑色的。結果，嵌入的陰影在影像的透明區域變得不可見。

克服透明度障礙

要解決此問題，可以使用一個簡單而優雅的解決方案：使用 CSS : 在偽元素之後。透過在容器中新增 :after 偽元素，我們可以建立一個位於影像頂部的額外圖層並接收插入框陰影。

在下面更新的 CSS 片段中，我們應用 :after 偽元素元素到

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

透過此修改，插圖框陰影現在出現在影像的不透明和透明區域上，從而提供所需的陰影效果。