Тень не появляется

Я пытаюсь разместить тени в одном из div, и это не появляется. Вот один div, где я пытаюсь реализовать тень:

#intro {
    padding: 0px;
    margin: 0px auto;
    width: 100%;
    float:inherit;
    overflow: hidden;
    height: 800px;
    position:inherit;
    background-color: #00b3e1;; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

Вот URL: http://rachelchaikof.com/awareness/

Ответ 1

Пожалуйста, обратитесь к Крису Герберту ниже для правильного решения

Предыдущий ответ:

для поддержки в хром, моз, сафари:
-moz-box-shadow:0 0 8px 0 black;
-webkit-box-shadow:0 0 8px 0 black;
box-shadow:0 0 8px 0 black;
т.е. поддержка намного сложнее, см.
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color='#33000000');

Ответ 2

Причина, по которой вы не видите тень, - это то, что следующий div (#one) находится непосредственно под ней, а тень отображается под #one. Удалите фоновое изображение С#one, и тень станет видимой.

Добавьте это в #intro CSS, чтобы сделать тень видимой:

position: relative;
z-index: 10;

Если вы хотите, чтобы тени были видны в других текстовых областях, вам также нужно будет отрегулировать их значения z-index, причем верхний элемент (#intro) имеет самое высокое значение.

Ответ 3

Другой сценарий, который у меня был сегодня. Коробчатая тень не появлялась, несмотря на установление позиции относительно дива. По-видимому, рядом с этим полем не было никакого контента, у которого была коробочная тень.

Как только контент был добавлен, появилась коробка-тень.