Create a nested dark shadow effect using CSS

Question

I am trying to get an effect similar to the shadow effect in CSS that looks like this:

image of the sunken button http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png

Does anyone know how I can get this effect using CSS?

Answer 1

The answer has already been provided to you ( box-shadow: inset ..), so here you can quickly demonstrate how it can work:

http://jsfiddle.net/L6nJj/

The important part is box-shadow: inset 2px 2px 3px 0 red.

For an explanation of the options available: https://developer.mozilla.org/en/css/box-shadow#Values

box-shadow, , IE, "": http://caniuse.com/css-boxshadow

Answer 2

multiple , , .

, box-shadow - " x, y-, , "

, .

( # 222):

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Answer 3

CSS3 box-shadow, . L , .