Как я могу получить box-shadow только на определенных сторонах?

Question

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

Answer 1

.element{box-shadow:0 -5px 10px #000}

Первое значение - это положение тени на X, вторая позиция тени на Y, третье измерение тени, четвертый цвет.

Поместив отрицательную позицию Y в половину измерения тени, вы не получите тени в нижней части вашего элемента.

Answer 2

Я до сих пор не нашел прилично выглядящего способа, который бы работал во всех ситуациях. Вот два метода:

1.) http://jsfiddle.net/pGGXH/28/ - используйте отступы + переполнение, чтобы показать тень.

<div class="no-overflow">
   <div class="box">my box</div>
</div>

.no-overflow {
    overflow:hidden;
    padding:5px 5px 0 5px;
}
.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 0 5px #333;
    padding:10px;
}

2.) http://jsfiddle.net/pGGXH/33/ - использует наложение теней границ (можно сложить несколько теней границ друг на друга)

<div class="box">my box</div>

.box {
    border:1px solid #000;
    border-radius:5px;
    box-shadow:0 10px 0 #fff, 0 0 5px #333;
    padding:10px;
}

Однако с радиусом границы оба решения не так уж хороши.

Answer 3

Об этом спрашивали миллионы раз.Просто используйте параметр распространения, чтобы уменьшить его, затем переместите так, чтобы он отображался только с одной стороны.Подобный вопрос здесь: тень только снизу css3

Answer 4

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

Answer 5

Свойство box-shadow позволяет веб-дизайнерам легко реализовать несколько теней (внешних или внутренних) на элементах блока, указав значения для цвета, размера, размытия и смещения.

Синтаксис свойства выглядит следующим образом:

box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ] 

Например;

box-shadow: 3px -3px 3px #000000; //Shadow towards North East direction.

Проверьте и экспериментируйте здесь ... http://jsfiddle.net/jgsdS/

Answer 6

Похоже, это невозможно (http://www.w3.org/TR/css3-background/#the-box-shadow), вам нужно попробовать некоторые значения длины.