CSS3 Вопрос: как не иметь тени для теней на вершине div?

Прямо сейчас, когда я это делаю:

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

он дает тень коробки со всех сторон. Я хочу его с трех сторон, но не сверху. Как предотвратить появление тени сверху?

Ответ 1

Если вы можете вложить два div, вы должны использовать комбинацию полей и overflow:hidden, чтобы "отрубить" верхнюю тень, не теряя требуемого эффекта на других краях.

Например, эта надбавка:

<div class="outer">
    <div class="inner">hello</div>
</div>

И этот CSS

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

Дает этот результат - http://jsfiddle.net/ajcw/SLTE7/2/

Ответ 2

box-shadow поддерживает несколько запятых, что означает, что это возможно и может быть выполнено, как показано ниже:

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

Первая группа приносит тень справа и внизу, а вторая группа добавляет тень влево (используя отрицательное значение) и снизу.

Полный код поддержки кросс-браузера:

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

Ответ 3

Просто используйте только вертикальное смещение:

.shadow {
  -moz-box-shadow: 0px 5px 200px #00C0FF;
  -webkit-box-shadow: 0px 5px 200px #00C0FF;
  box-shadow: 0px 5px 200px #00C0FF;
}

Это сдвинет тень вниз, так что вершина будет меньше тени. Вам придется играть с ним, чтобы получить его так, как вы хотите, в своей ситуации. Этот сайт также содержит отличную информацию о тенях в коробке, таких как слоизация, а также поддержка браузера.