Тень окна CSS3: как внешний, так и внутренний

Возможно ли создать как внешнюю тень для 3D-эффекта, так и внутреннее свечение вставки? У меня есть div с зеленым фоном, который поверх синего div. До сих пор у меня есть следующее:

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

Фактические цвета в формате #ffffff. Похоже, что вторая декларация отменяет первую. Есть ли способ обойти это?

Ответы

Ответ 1

Вы просто объявляете box-shadow один раз и используете обе версии внутри, разделенные запятой:

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

Свойство box-shadow придает коробке одну или несколько теней. Свойство представляет собой список теней, разделенных запятыми, каждый из которых задан значениями длины 2-4, необязательный цвет и необязательное ключевое слово вставки.

Итак, для вас:

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

Смотрите: http://jsfiddle.net/JzsAh/