為什麼我的嵌入框陰影不能處理 CSS 中的圖片？-css教學-PHP中文網

為什麼我的嵌入框陰影不能處理 CSS 中的圖片？

Patricia Arquette

發布： 2024-11-01 12:37:02

原創

647 人瀏覽過

Why Isn't My Inset Box Shadow Working on Images in CSS?

插入框陰影不適用於圖像：CSS 解決方案

在CSS 中， box-shadow 屬性在元素周圍創建陰影，將其擴展到元素邊界之外。但是，當應用於影像時，此陰影通常似乎不會延伸到影像上。

要解決此問題，您可以利用 :after 偽元素。這允許您在父容器中建立一個附加元素，從而允許將陰影應用於該元素而不是直接應用於映像。

這是一個範例：

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: outset 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 中的圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！