CSS3 box shadow: both, outter and inner

by

You simply declare box-shadow once, and use both versions inside, separated with a comma:

http://www.w3.org/TR/css3-background/#the-box-shadow

The ‘box-shadow’ property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional ‘inset’ keyword.

So, for you:

.greendiv {
    background: darkgreen;
    box-shadow: 10px -7px 15px darkgray, lightgreen 0px 0px 3px inset;
}

See: http://jsfiddle.net/JzsAh/

Leave a Comment