Будь-який спосіб отримати поле-тінь з лівої та правої (горизонтальної?) Сторони лише без злому або зображень. Я використовую:

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

Але це дає тінь усім навколо.

У мене немає меж навколо стихій.

ПРИМІТКА. Я пропоную перевірити відповідь @ Hamish нижче; це не передбачає недосконалого «маскування» в описаному тут рішенні.

Ви можете наблизитися до декількох коробок-тіней; по одному для кожної сторони

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/

Мене не влаштовували округлені верх і низ до тіні, присутніх у рішенні Деферу, тому я створив свою власну.

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, як показано у відповіді @ Лука. Однак зауважте, що в багатьох випадках це все-таки призводить до зменшення тіні у верхній і нижній частині, як ви бачите в цьому прикладі:

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

Я знову додав негативний спред (-3 пікселя) до чорної тіні, тому він не тягнеться за кути.

Тут загадка .

Це добре працює для всіх браузерів:

-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;. Власне майно робить його красивим і всередині

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;

Це працює з мого боку. Сподіваюся, це вам допоможе.

НІСЬКА ВСТАВКА ВІД НА ЛІВОМУ ТА ПРАВИМУ СТАНАХ ДИВІВ, ЗНАЧЕНЬ ТА ВНУТРІШНЬОГО ВМІСТУ

Для отримання приємної тіні для вставки в правій та лівій частині зображень або будь-якого іншого вмісту використовуйте її таким чином

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

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

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

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

Іншою ідеєю може стати створення темно розмитого псевдоелемента зрештою з прозорістю для імітації тіні. Зробіть це з трохи меншою висотою і більшою шириною ig

Ви можете використовувати 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не було сенсу починати.

Я спробував скопіювати bootstrap shadow-sm прямо у правій частині, ось мій код:

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