Как создать тень только на одной стороне элемента?

Есть ли способ уронить тень только снизу? У меня есть меню с 2 изображениями рядом друг с другом. Я не хочу правильную тень, потому что она перекрывает правильное изображение. Я не люблю использовать изображения для этого, так что есть способ поместить его только внизу, например:

box-shadow-bottom: 10px #FFF; или похожие?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

ОБНОВЛЕНИЕ 4

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

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

ОБНОВЛЕНИЕ 3

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

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

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

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

ОБНОВЛЕНИЕ 2

По-видимому, вы можете сделать это, просто добавив дополнительный параметр к CSS для box-shadow, как и все остальные. Вот демо:

http://jsfiddle.net/K88H9/821/

CSS

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

Это было бы лучшим решением. Добавляемый дополнительный параметр описывается так:

Четвертая длина - это расстояние распространения. Положительные значения заставляют форму тени расширяться во всех направлениях на указанный радиус. Отрицательные значения приводят к сокращению формы тени.

ОБНОВИТЬ

Проверьте демо на jsFiddle: http://jsfiddle.net/K88H9/4/

Я создал «теневой элемент», который скрылся бы за фактическим элементом, который вы хотели бы иметь тень. Я сделал ширину «теневого элемента» точно меньшей ширины, чем фактический элемент, в 2 раза больше указанной вами тени; тогда я выровнял это правильно.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Оригинальный ответ

Да, вы можете сделать это с тем же синтаксисом, который вы указали. Первое значение контролирует горизонтальное позиционирование, а второе значение контролирует вертикальное позиционирование. Так что просто установите для первого значения, 0pxа для второго смещение, которое вы хотите, следующим образом:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Для получения дополнительной информации о тенях коробки, проверьте эти:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Надеюсь, это поможет.

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

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

Демонстрационная версия: http://dabblet.com/gist/a8f8ba527f5cff607327

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

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

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Я думаю, это то, что вы после?

.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свойства, и, как указывает Ли, вы всегда должны размещать свойство без префикса внизу, после префикса.

Так что это:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

&: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 такими, какими вы хотите, чтобы они были в верхней / нижней части тени.

Вы можете сделать это так:

Общий синтаксис:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Пример: мы хотим сделать только тень нижнего блока с красным цветом,

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

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

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

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>