Box shadow inner covered by another div

Question

I have a div that containing a inner box shadow, but these shadow is coverd by another div, i tried with postion:relative but nothing is changed.

Here is a example CODE EXAMPLE

example-div{
    background:#fff;
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

Thanks in advance !

You can't put shadow over child elements. Put shadow directly on child. — Justinas, Mar 24 '15 at 14:16
You don't really need to prefix [box shadows](http://caniuse.com/#search=box-shadow) unless you're looking to support ***really*** old browsers. — jbutler483, Mar 24 '15 at 14:17

score 0 · Accepted Answer · answered Mar 24 '15 at 14:16

2 things you need to do - change the z-index of your picture so that it is behind your circular div, and then change the background of your circular div so that it is transparent instead of white.

.example-div{
    background: transparent; /*this way you can see behind the circle*/
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

.example-div img{
    width:260px;
    height:250px;
    border-radius: 100%;
    position: relative; /*needed for z-index*/
    z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}

<div class="example-div">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>

thanks very much.Its possible to set a shadow all around the circle? — Radu Muscă, Mar 24 '15 at 14:20
Change the h and v to 0. Like this: inset 0px 0px 5px -5px rgba(50, 50, 50, 0.75); — Jacob, Mar 24 '15 at 14:24

Box shadow inner covered by another div

1 Answers1