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

Inset Box Shadow Not Working on Images: A CSS Solution

In CSS, the box-shadow property creates a shadow around an element, extending it outside the element's boundaries. However, when applied to an image, this shadow often doesn't seem to extend over the image.

To resolve this issue, you can leverage the :after pseudo element. This allows you to create an additional element within the parent container, allowing the shadow to be applied to that element instead of the image directly.

Here's an example:

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%;
}

By adding this :after declaration to the main element, you create an invisible and transparent layer over the image. The shadow is then applied to this layer, allowing it to extend over the image as desired.

The above is the detailed content of Why Isn\'t My Inset Box Shadow Working on Images in CSS?. For more information, please follow other related articles on the PHP Chinese website!