css3 box тени только в одном направлении?

Question

У меня есть элемент с вложенными тенями, но я хочу, чтобы тень была только сверху.

Нет ли способа установить только верхнюю тень?Нужно ли прибегать к созданию дополнительных элементов для наложения боковых теней?

Answer 1

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

для справки _{элементы * необязательны} :

box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;

<spread-radius> должен быть отрицательным <blur-radius> (чтобы не было видно ни одной из других размытых сторон), а затем вам нужно уменьшить <offset-y> на ту же величину:

box-shadow: inset 0 20px 20px -20px #000000;

Это даст вам одну градиентную полосу на вершине элемента.

Answer 2

box-shadow смещает тень на заданную величину в каждом направлении. Поэтому вам нужно, чтобы смещение по оси x было равно 0, а по оси y - что-то отрицательное.

Кроме того, вы должны поиграть с радиусом размытия и радиусом распространения, чтобы тень не была видна слева и справа.

Пример:

box-shadow: #777 0px -10px 5px -2px;

См. Описание в Mozilla Developer Network .

Answer 3

Пример:

  box-shadow: 0 2px 0px 0px red inset;

Первый параметр и второй параметр задают смещение тени в направлении x и направлении y соответственно.Третий параметр указывает расстояние размытия.Наконец, четвертый параметр задает расстояние разброса.

Указание только второго параметра с требуемым смещением дает верхнюю тень без боковых теней.

Здесь можно найти демонстрацию: http://jsfiddle.net/rEdBy/

Очень хороший урок по CSS3 Box shadows - http://www.css3.info/preview/box-shadow/

Answer 4

Лучше было бы использовать градиент фона, здесь обе стороны в сторону.

http://jsfiddle.net/wh3L8/

Answer 5

Вот мой пример, пожалуйста, попробуйте один раз

-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;

Answer 6

Возможно, попробуйте использовать box-shadow:

box-shadow: h-shadow v-shadow blur spread color inset;

с переполнением-x:

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

используйте overflow-x: hidden; иbox-shadow: 0px 10px 16px -10px #000;

Answer 7

Вот небольшой взлом, который я сделал.

<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div> 
<div class="one_side_shadow"></div>

1. Создайте <div class="one_side_shadow"></div> прямо под элементом, для которого я хочу создать одностороннюю тень от коробки (в этом случае я хочу одностороннюю тень для id="element", идущую снизу)

2. Затем я создал обычную теневую рамку, используя отрицательное вертикальное смещение, чтобы подтолкнуть тень вверх в одну сторону.

   box-shadow: 0 -8px 20px 2px # DEDEE3;