Любой способ получить box-shadow на левой и правой (горизонтальной?) Сторонах только без хаков или изображений. Я использую:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

Но это дает тень вокруг.

У меня нет границ вокруг элементов.

ПРИМЕЧАНИЕ: я предлагаю проверить ответ @ Хэмиша ниже; это не связано с несовершенной «маскировкой» в решении, описанном здесь.

Вы можете приблизиться с несколькими тенями; по одному на каждую сторону

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

редактировать

Добавьте еще 2 тени-тени сверху и снизу вверх, чтобы замаскировать просвечивающее.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

Я не был удовлетворен округлыми верхом и низом тени, присутствующей в решении Deefour, поэтому создал свою собственную.

inset box-shadow создает красивую равномерную тень с обрезанными верхом и низом.

Чтобы использовать этот эффект по бокам вашего элемента, создайте два псевдоэлемента :beforeи :afterрасположите их абсолютно по бокам от исходного элемента.

div:before, div:after {
  content: " ";
  height: 100%;
  position: absolute;
  top: 0;
  width: 15px;
}
div:before {
  box-shadow: -15px 0 15px -15px inset;
  left: -15px;
}
div:after {
  box-shadow: 15px 0 15px -15px inset;
  right: -15px;
}

div {
  background: #EEEEEE;
  height: 100px;
  margin: 0 50px;
  width: 100px;
  position: relative;
}

<div></div>

редактировать

В зависимости от вашего дизайна, вы можете использовать clip-path, как показано в ответе @ Luke. Однако обратите внимание, что во многих случаях это по-прежнему приводит к тому, что тень сужается сверху и снизу, как вы можете видеть в этом примере:

div {
  width: 100px;
  height: 100px;
  background: #EEE;
  box-shadow: 0 0 15px 0px #000;
  clip-path: inset(0px -15px 0px -15px);
  position: relative;
  margin: 0 50px;
}

<div></div>

Попробуйте это, это работает для меня:

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

Классический подход: негативное распространение

CSS box-shadow использует 4 параметра: h-shadow, v-shadow, blur, spread:

box-shadow: 10px 0 8px -8px black;

V-тень (Verical тень) устанавливается в 0.

размытия добавляет эффект градиента, но добавляет также небольшую тень на вертикальных границах (ту, от которой мы хотим избавиться).

отрицательный распространение уменьшает тень на всех границах: вы можете играть с ним, пытаясь удалить эту маленькую вертикальную тень, не оказывая слишком сильного влияния на стороны (это легче для маленьких теней, от 5 до 10 пикселей).

Здесь скрипка пример .

Второй подход: Абсолютный div на стороне

Добавьте пустой элемент div в свой элемент и создайте стиль с абсолютным позиционированием, чтобы он не влиял на содержимое элемента.

Здесь скрипка с примером левой тени.

<div id="container">
  <div class="shadow"></div>
</div>

.shadow{
    position:absolute;
    height: 100%;
    width: 4px;
    left:0px;
    top:0px;
    box-shadow: -4px 0 3px black;
}

Третье: маскирующая тень

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

box-shadow: 
    0 -6px white,          // Top Masking Shadow
    0 6px white,           // Bottom Masking Shadow
    7px 0 4px -3px black,  // Left-shadow
    -7px 0 4px -3px black; // Right-shadow

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

Здесь скрипка .

Это прекрасно работает для всех браузеров:

-webkit-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
-moz-box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;
box-shadow: -7px 0px 10px 0px #000, 7px 0px 10px 0px #000;

DEMO

Вы должны использовать несколько box-shadow;. Свойство Inset делает его красивым и красивым

div {
    box-shadow: inset 0 12px  15px -4px rgba(31, 73, 125, 0.8), inset 0 -12px  8px -4px rgba(31, 73, 125, 0.8);
    width: 100px;
    height: 100px;
    margin: 50px;
    background: white;
}

Другой способ с: overflow-y:hiddenна родителя с дополнением.

#wrap {
    overflow-y: hidden;
    padding: 0 10px;
}
#wrap > div {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 20px -5px red;
}

http://jsfiddle.net/qqx221c8/

clip-pathВ настоящее время (2020 г.) я нашел лучший способ достижения теней на определенных сторонах элементов, особенно когда требуемый эффект представляет собой «чистую резку» на определенных кромках , например:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 0 0 10px 5px rgba(0,0,0,0.75);
    clip-path: inset(0px -15px 0px -15px);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

... в отличие от ослабленной / уменьшенной / истончающейся тени, как это:

.shadow-element {
    width: 100px;
    height: 100px;
    background-color: #FFC300;
    box-shadow: 15px 0 15px -10px rgba(0,0,0,0.75), -15px 0 15px -10px rgba(0,0,0,0.75);

    /* position and left properties required to bring element out from edge of parent
    so that shadow can be seen; margin-left would also achieve the same thing */
    position: relative;
    left: 15px;
}

<div class="shadow-element"></div>

Просто примените следующий CSS к данному элементу:

box-shadow: 0 0 Xpx Ypx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);

Куда:

• Apx устанавливает видимость тени для верхнего края
• Bpx право
• Cpx низ
• Dpx осталось

Введите значение 0 для любых ребер, где тень должна быть скрыта, и отрицательное значение (такое же, как объединенный результат радиуса размытия + значения разброса - Xpx + Ypx) для любых ребер, где должна отображаться тень.

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

Это работает на моей стороне. Надеюсь, это поможет вам.

КРАСИВЫЙ ВСТАВКА ТЕНЬ НА ЛЕВОЙ И ПРАВИЛЬНОЙ СТОРОНЕ ДЛЯ DIVS, ИЗОБРАЖЕНИЙ ИЛИ ВНУТР.

Для получения хорошей тени на правой и левой сторонах изображений или любого другого содержимого используйте его следующим образом.

*** Z-индекс: -1 делает хороший трюк, показывая изображения или внутренние объекты со вставками

<html>
<div class="shadowcontainer">
<img src="https://www.google.es/images/srpr/logo11w.png" class="innercontent" style="with:100%"/>
</div>

<style>

.shadowcontainer{
display:inline-flex;
box-shadow: inset -40px 0px 30px -30px rgba(0,0,0,0.9),inset 40px 0px 30px -30px rgba(0,0,0,0.9);
}

.innercontent{
z-index:-1
}
</style>
</html>

В некоторых ситуациях вы можете скрыть тень от другого контейнера. Например, если есть DIV выше и ниже DIV с тенью, вы можете использовать position: relative; z-index: 1;окружающие DIV.

Только для горизонтали, вы можете обмануть box-shadow, используя overflow для его родительского div:

<div class="parent">
  <div class="box-shadow">content</div>
</div>

.parent{
  overflow:hidden;
}
.box-shadow{
  box-shadow: box-shadow: 0 5px 5px 0 #000;
}

Другая идея может заключаться в создании темного размытого псевдоэлемента с прозрачностью для имитации тени. Сделайте это с немного меньшей высотой и большей шириной.

Вы можете использовать 1 div внутри, чтобы «стереть» тень:

.yourdiv{
    position:relative;
    width:400px;
    height:400px;
    left:10px;
    top:40px;
    background-color:white;
    box-shadow: 0px 0px 1px 0.5px #5F5F5F;

}
.erase{
    position:absolute;
    width:100%;
    top:50%;
    height:105%;
    transform:translate(0%,-50%);
    background-color:white;
}

Вы можете играть с «высота:%;» и "ширина:%;" стереть ту тень, которую вы хотите.

По какой-то причине приведенные здесь ответы просто не сработают в моем случае. Итак, я стал креативным. Вот новое решение для вас все, что использует linear-gradient()вместо box-shadow.

p {
  padding: 1rem;
  background-color: #b55;
  color: white;
  background-image: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0) .5rem, rgba(0,0,0,0), rgba(0,0,0,0.0) calc(100% - .5rem), rgba(0,0,0,0.5));
}

<p>Testing</p>

Хотя я не собираюсь спорить по этому поводу, на самом деле это не «коробочка», которую вы (мы) пытаемся создать, поэтому я полагаю, можно сказать, что box-shadowс самого начала не имело смысла.

Я попытался скопировать загрузчик shadow-sm только с правой стороны, вот мой код:

.shadow-rs{
    box-shadow: 5px 0 5px -4px rgba(237, 241, 235, 0.8);
}