Вопрос CSS3: как не иметь тени от блока на верхней части элемента?

Question

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

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

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

Answer 1

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

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

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

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

-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;

Answer 2

Если вы можете вкладывать два деления, тогда вы сможете использовать комбинацию полей и 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/

Answer 3

Только с вертикальным смещением :

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

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