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

Ответ 1

ОБНОВЛЕНИЕ 4

То же, что и обновление 3, но с современными правилами css (= less), чтобы не требовалось специального позиционирования на псевдоэлементе.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

Ответ 2

Просто используйте параметр 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>

Ответ 3

Если у вас есть фиксированный цвет фона, вы можете скрыть эффект боковой тени с двумя маскирующими тенями, имеющими один и тот же цвет фона, и размытие = 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), чтобы предотвратить ее распространение за углы.

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

Ответ 4

Всегда лучше читать спецификации. Нет свойства 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>

Ответ 5

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

.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>

Ответ 6

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

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

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

Как это:

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

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

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

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

Ответ 7

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

.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).

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

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

Ответ 8

Вы также можете использовать clip-path чтобы обрезать (скрыть) все переполняющиеся края, кроме той, которую вы хотите показать:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Смотрите клип-путь (MDN). Аргументами polygon являются верхняя левая точка, верхняя правая точка, нижняя правая точка и нижняя левая точка. Устанавливая нижний край на 200% (или любое число больше 100%), вы ограничиваете переполнение только нижним краем.

Ответ 9

Если ваш фон сплошной (или вы можете воспроизвести его с помощью 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>

Ответ 10

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

.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.

Ответ 11

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

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

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

Ответ 12

Вы также можете просто сделать градиент внизу - это было полезно для меня, потому что тень, которую я хотел, была на элементе, который уже был полупрозрачным, поэтому мне не нужно было беспокоиться об отсечении:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

Просто сделайте так, чтобы свойства "bottom" и "height" совпадали, и установите ваши значения rgba такими, какими вы хотите, чтобы они были в верхней/нижней части тени

Ответ 13

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

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>

Ответ 14

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

 .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>