Как сделать тень только с одной стороны?

#css #css3

Хочу сделать тень у div блока, но чтобы она была только с одной стороны - сверху.

Исходный стиль:



div {
  box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
}





Проблема заключается в том, что тень присутствует так же и слева и справа (совсем
капельку и снизу, что тоже является недопустимым). Различные манипуляции с 2-4 значениями
ни к чему не привели (да и позиционирование хочется сохранить текущее). Тень так или
иначе все равно присутствует по бокам.

Как все же добиться желаемого результата?
    

Ответы

Ответ 1

section {
  width: 200px;
  height: 150px;
  padding-top: 30px;
  margin: 0 30px 30px;
  overflow: hidden;
}

div {
  box-shadow: 0 15px 30px 10px rgba(0, 0, 0, .5);
  width: 100%;
  height: 100%;
  background: antiquewhite;
}



Ответ 2

В моем случае получилось обыграть ситуацию с помощью внутренней тени:



div {
  box-shadow: inset 0 -7px 20px -10px rgba(0, 0, 0, .5);/* получившаяся тень */
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
}





По сути раннее внешнее позиционирование на топ'е блока ушло на внутреннее нижнее
позиционирование соседнего блока. В результате все выглядит достаточно чисто.

Также, пока писал этот ответ, в голову пришла альтернативная идея по внутренней реализации
в соседнем блоке - это с помощью linear-gradient.


Ответ 3

Хотел сделать тень только сверху и только внутрь. Свойством box-shadow ничего не
вышло этим, зато с фоном получилось:



div {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 20%);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
  outline: 1px dotted red;
}



Ответ 4

Чтобы сверху, нужун box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2);



div {
  box-shadow: 0 -6px 4px -4px rgba(0, 0, 0, .2);
  width: 200px;
  height: 150px;
  overflow: hidden;
  margin: 30px;
  outline: 1px dotted red;
}