только тень снизу css3

Просто используйте параметр spread, чтобы уменьшить тень:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Live demo: http://dabblet.com/gist/a8f8ba527f5cff607327

Чтобы не видеть тени на сторонах, радиус распространения (абсолютное значение) радиуса (4-й параметр) должен быть таким же, как радиус размытия (третий параметр).

Если у вас есть фиксированный цвет фона, вы можете скрыть эффект боковой тени с двумя маскирующими тенями, имеющими один и тот же цвет фона, и размытие = 0, например:

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Обратите внимание, что черная тень должна быть последней и иметь отрицательный спред (-3px), чтобы предотвратить ее распространение за углы.

Вот скрипка (измените цвет маскирующих теней, чтобы увидеть, как это на самом деле работает).

Я думаю, что это то, что вам нужно?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Всегда лучше читать спецификации. Нет свойства box-shadow-bottom, и, как указывает Lea, вы всегда должны помещать свойство un prefixed внизу, после префикса.

Итак, это:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

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

Извините, что сам не подумал об этом, но видел это где-то еще.

Используя элемент, чтобы обернуть элемент, получая тень блока и переполнение: скрытый на обертке, вы можете сделать так, чтобы дополнительная тень блока исчезла и все еще имела пригодную для использования границу. Это также устраняет проблему, когда элемент меньше, чем кажется, из-за распространения.

Как это:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Содержание идет здесь

Все еще умное решение, когда это должно быть сделано в чистом CSS!

Как сказал Йорген Эвенс.

Мне также нужна была тень, но только под изображением и была установлена ​​чуть левая и правая. Это сработало для меня:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Элемент, к которому это применяется, - это изображение на всю страницу (980px x 300px).

Если это помогает при игре с настройками, они работают следующим образом:

горизонтальная тень, вертикальная тень, размытие, распространение (т.е. размер тени) и цвет.

Эта ручка кода (не мной) демонстрирует очень простой способ сделать эту и другие стороны сами по себе довольно красиво:

box-shadow: 0 5px 5px -5px #333;

https://codepen.io/zeckdude/pen/oxywmm

Лучше взглянуть на тень:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

этот код в настоящее время используется на веб-сайте stackoverflow.

Если ваш фон сплошной (или вы можете воспроизвести его с помощью CSS), вы можете использовать линейный градиент следующим образом:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Это создаст градиент 5px в нижней части элемента, от черного с непрозрачностью 30% до полностью прозрачного. Остальная часть элемента имеет белый фон. Конечно, изменяя последние 2 цветовых ограничителя линейного градиента, вы можете сделать фон полностью прозрачным.

обновить на кого-то свой ответ прозрачные стороны вместо белого, чтобы он работал и на других цветных фонах.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

внутренняя тень

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>