Question

I’m using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it’s still not working.

Visit the website here.

Code

box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;

Answer 1

It has nothing to do with your syntax. It’s just a peculiarity of an img element, not the box-shadow property.

Consider looking at this example: http://jsfiddle.net/YhePf/ – if you disable showing images in your browser – you will see that instead of an image there will be a green block with the box-shadow applied to it.

Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it’s under the image itself (just like the background-color property). I may prove that with another fiddle. It’s different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ – see the red 2px shadow and the green background