Boxshadow inset not working

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

Answer 2

I think you might just be missing the spread radius value from the first shadow. :)

Answer 3

i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div. for more detail chk it out http://jordandobson.com/_expirements/css/vignette/