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

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

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

Ответ 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;

Он даст вам одну градиентную полосу в верхней части элемента.

Ответ 2

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

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

Пример:

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

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

Ответ 3

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

http://jsfiddle.net/wh3L8/

Ответ 4

Пример:

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

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

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

Демо можно найти здесь: http://jsfiddle.net/rEdBy/

Очень хороший учебник по CSS3 Коробки в тенях - http://www.css3.info/preview/box-shadow/

Ответ 5

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

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

Ответ 6

Вот немного взломать, что я сделал.

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

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

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

Ответ 7

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

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

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

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