Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Boxshadow inset not working

Tags:

css

insets

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;
like image 568
Is3 Avatar asked Jul 20 '12 17:07

Is3


People also ask

What is box shadow 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.

How do you add a shadow to only one side?

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.

Can you have multiple box shadows?

You can comma separate box-shadow any many times as you like.


1 Answers

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

like image 187
skip405 Avatar answered Oct 16 '22 02:10

skip405