Jakikolwiek sposób, aby uzyskać cień z lewej i prawej strony (poziomy?) Bez hacków i obrazów. Ja używam:

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

Ale daje cień dookoła.

Nie mam granic wokół elementów.

UWAGA: Sugeruję sprawdzenie odpowiedzi @ Hamish poniżej; nie obejmuje niedoskonałego „maskowania” w opisanym tutaj rozwiązaniu.

Możesz zbliżyć się za pomocą wielu cieni; jeden na każdą stronę

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/

Edytować

Dodaj jeszcze 2 cienie dla górnego i dolnego przodu, aby zamaskować krwawienie.

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/

Nie byłem zadowolony z zaokrąglonego górnego i dolnego cienia obecnego w rozwiązaniu Deefour, więc stworzyłem swój własny.

inset box-shadow tworzy ładny jednolity cień z odciętą górną i dolną częścią.

Aby użyć tego efektu po bokach elementu, utwórz dwa pseudoelementy :beforei :afterumieść je absolutnie po bokach oryginalnego elementu.

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>

Edytować

W zależności od projektu możesz być w stanie używać clip-path, jak pokazano w odpowiedzi @ Luke'a. Pamiętaj jednak, że w wielu przypadkach nadal powoduje to, że cień zwęża się u góry iu dołu, jak widać w tym przykładzie:

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>

Wypróbuj to, działa dla mnie:

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

Podejście klasyczne: spread ujemny

CSS box-shadow używa 4 parametrów: h-shadow, v-shadow, blur, spread:

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

V cieni (shadow verical) jest ustawiony na 0.

Rozmycie parametr dodaje efekt gradientu, ale także dodaje trochę cienia na granicach pionowych (jeden chcemy się pozbyć).

Negatywne rozproszenie zmniejsza cień na wszystkich granicach: możesz się nim bawić, próbując usunąć ten mały pionowy cień bez wpływu na zbyt duży na bokach (łatwiej jest dla małych cieni, od 5 do 10 pikseli).

Oto przykład skrzypiec .

Drugie podejście: Absolutny div z boku

Dodaj pusty element div do elementu i nadaj mu styl absolutnego położenia, aby nie wpływał na zawartość elementu.

Oto skrzypce z przykładem lewego cienia.

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

Po trzecie: maskowanie cienia

Jeśli masz stałe tło, możesz ukryć efekt cienia bocznego za pomocą dwóch cieni maskujących o tym samym kolorze tła i rozmycia = 0, przykład:

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

Ponownie dodałem ujemny spread (-3px) do czarnego cienia, aby nie rozciągał się poza narożniki.

Oto skrzypce .

Działa to dobrze dla wszystkich przeglądarek:

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

PRÓBNY

Musisz użyć wielokrotności box-shadow;. Właściwość wstawki sprawia, że ​​wygląda ładnie i wewnątrz

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

Innym sposobem jest: overflow-y:hiddenna rodzicu z wypełnieniem.

#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-pathjest teraz (2020) najlepszym sposobem, w jaki udało mi się uzyskać cienie ramek na określonych bokach elementów, szczególnie gdy wymaganym efektem jest cień „czystego cięcia” na poszczególnych krawędziach , taki jak ten:

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

... w przeciwieństwie do osłabionego / zmniejszonego / przerzedzającego się cienia:

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

Po prostu zastosuj następujący CSS do danego elementu:

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

Gdzie:

• Apx ustawia widoczność cienia dla górnej krawędzi
• Bpx dobrze
• Cpx Dolny
• Dpx lewo

Wprowadź wartość 0 dla wszystkich krawędzi, na których cień powinien być ukryty, oraz wartość ujemną (taką samą jak łączny wynik promienia rozmycia + wartości rozproszenia - Xpx + Ypx) na wszystkich krawędziach, na których cień powinien zostać wyświetlony.

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

Działa po mojej stronie. Mam nadzieję, że ci to pomaga.

ŁADNY CIENEK WEWNĘTRZNY NA LEWEJ I PRAWEJ STRONIE DLA NURKÓW, OBRAZÓW LUB TREŚCI WEWNĘTRZNYCH

Aby uzyskać ładny wstawkowy cień po prawej i lewej stronie na obrazach lub innej zawartości, użyj go w ten sposób

*** Indeks Z: -1 to niezła sztuczka, gdy wyświetla się obrazy lub obiekty wewnętrzne z wypustkami

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

W niektórych sytuacjach możesz ukryć cień przy innym pojemniku. Na przykład, jeśli DIV znajduje się powyżej i poniżej DIV z cieniem, możesz użyć position: relative; z-index: 1;na otaczających DIV.

Tylko w poziomie, możesz oszukać cień pola za pomocą przepełnienia jego rodzica 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;
}

Innym pomysłem może być stworzenie ciemnego, zamazanego pseudoelementu, ostatecznie z przezroczystością imitującą cień. Zrób to z nieco mniejszą wysokością i większą szerokością ig

Możesz użyć 1 div wewnątrz, aby „wymazać” cień:

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

Możesz grać z „height:%;” i „szerokość:%;” aby usunąć pożądany cień.

Z jakiegokolwiek powodu podane tutaj odpowiedzi po prostu nie działałyby w moim przypadku. Mam kreatywność. Oto nowe rozwiązanie dla Ciebie, które używa linear-gradient()zamiast 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>

Chociaż nie zamierzam kłócić się o to, nie jest to tak naprawdę „pudełko”, które ty (my) próbujemy stworzyć, więc przypuszczam, że można powiedzieć, że box-shadownie miało to sensu na początek.

Próbowałem skopiować bootstrap shadow-sm po prawej stronie, oto mój kod:

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