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;
Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y> These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element.
To set a box-shadow on one side of the element, use the box-shadow property. This property has four length parameters and a color. box-shadow: h-offset v-offset blur spread color; h-offset sets the shadow horizontally.
You can comma separate box-shadow any many times as you like.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With