插入框陰影和影像:解決方法
在包含影像的容器上使用插入框陰影通常會導致陰影不出現影像。為了克服這項限制,可以採用獨特的 CSS 解決方案。
透過使用 :after 偽元素,可以建立第二個陰影承載層。以下是示範此技術的範例程式碼:
CSS:
main::after { box-shadow: inset 3px 3px 10px 0 #000000; content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; }
HTML:
<main> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png"> </main>
此方法不需要標記中的其他元素,提供了乾淨且基於CSS 的方法。 :after 元素充當覆蓋影像的“陰影容器”,允許插入框陰影在其上延伸。
以上是如何使用 CSS 將 Inset Box-Shadow 套用至圖片?的詳細內容。更多資訊請關注PHP中文網其他相關文章!