Sadece gölge veya görüntü olmadan sol ve sağ (yatay?) Taraflarda kutu gölgesi almanın herhangi bir yolu. Ben kullanıyorum:

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

Ama her yere gölge veriyor.

Elemanlar etrafında sınırım yok.

NOT: Aşağıdaki @ Hamish'in cevabını kontrol etmenizi öneririm ; burada açıklanan çözümde kusurlu “maskeleme” içermez.

Birden fazla kutu gölgesiyle yaklaşabilirsiniz; her bir taraf için bir tane

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/

Düzenle

İçindeki kanamaları maskelemek için üst ve alt üst ön kısımlara 2 kutu gölgesi daha ekleyin.

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'un çözümünde bulunan gölgenin yuvarlak üst ve alt kısmından memnun kalmadım, böylece kendiminkini yarattım.

inset box-shadow üst ve alt kesim ile hoş bir düzgün gölge oluşturur.

Bu efekti elemanınızın yanlarında kullanmak için, iki orijinal eleman oluşturun :beforeve :afterkesinlikle orijinal elemanın yanlarına yerleştirin.

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>

Düzenle

Tasarımınıza bağlı clip-patholarak, @ Luke'un cevabında gösterildiği gibi kullanabilirsiniz . Bununla birlikte, birçok durumda bunun hala bu örnekte gördüğünüz gibi üstte ve altta gölgenin azalmasına neden olduğuna dikkat edin:

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>

Bunu dene, benim için çalışıyor:

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

Klasik yaklaşım: Olumsuz yayılma

CSS box-shadow 4 parametre kullanır: h-shadow, v-shadow, blur, spread:

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

V-gölge (dikey eksende gölge) 0 olarak ayarlanır.

Bulanıklık parametre degrade etkisi ekler, aynı zamanda dikey sınırları (biz kurtulmak istediğiniz) biraz gölge ekler.

Negatif yayılma , tüm sınırlardaki gölgeyi azaltır: kenarlardaki çok fazla etkilemeden küçük dikey gölgeyi kaldırmaya çalışarak oynayabilirsiniz (5 ila 10 piksel küçük gölgeler için daha kolaydır.)

İşte keman örneği.

İkinci yaklaşım: Mutlak div yanda

Öğenize boş bir div ekleyin ve öğenin içeriğini etkilemeyecek şekilde mutlak konumlandırma ile şekillendirin.

Burada sol gölge örneği ile keman .

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

Üçüncü: Maskeleme gölgesi

Sabit bir arka planınız varsa, arka planla aynı renge sahip iki maskeleme gölgesiyle yan gölge efektini gizleyebilirsiniz ve bulanıklık = 0, örnek:

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

Siyah gölgeye tekrar negatif bir yayılım (-3px) ekledim, bu yüzden köşelerin ötesine uzanmıyor.

İşte keman .

Bu, tüm tarayıcılar için uygundur:

-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

Katsayıyı kullanmalısınız box-shadow;. İç metin özelliği güzel ve içeride görünmesini sağlar

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

Başka bir yol: overflow-y:hiddendolgu ile ebeveyn üzerinde.

#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şimdi (2020) öğelerin belirli taraflarında kutu gölgeleri elde etmek için bulduğum en iyi yol, özellikle de gerekli efekt bu gibi belirli kenarlarda "temiz kesim" gölgesi olduğunda :

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

... bu gibi zayıflatılmış / azaltılmış / inceltilmiş bir gölgenin aksine:

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

Söz konusu öğeye aşağıdaki CSS'yi uygulamanız yeterlidir:

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

Nerede:

• Apx üst kenar için gölge görünürlüğünü ayarlar
• Bpx sağ
• Cpx alt
• Dpx ayrıldı

Gölgenin gizlenmesi gereken kenarlar için 0 değerini ve gölgenin görüntülenmesi gereken kenarlara negatif bir değer (bulanıklık yarıçapı + yayılma değerlerinin birleşik sonucu ile aynı Xpx + Ypx) girin.

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

Benim tarafımda çalışıyor. Umarım size yardımcı olur.

DALGALAR, GÖRÜNTÜLER VEYA İÇ İÇERİKLER İÇİN SOL VE SAĞ TARAFLARDA GÜZEL INSET GÖLGESİ

Görüntülerin sağında ve solunda güzel bir iç gölge veya başka bir içerik için bu şekilde kullanın

*** Z-endeksi: -1, ekleri olan resimleri veya iç nesneleri gösterirken hoş bir numara yapar

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

Bazı durumlarda gölgeyi başka bir kapsayıcıyla gizleyebilirsiniz. Örneğin, gölgeli DIV'nin üstünde ve altında bir DIV varsa position: relative; z-index: 1;, çevredeki DIV'lerde kullanabilirsiniz.

Yalnızca yatay için, ana div öğesindeki taşmayı kullanarak kutu gölgesini kandırabilirsiniz:

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

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

Başka bir fikir, nihayetinde gölgeyi taklit etmek için şeffaflıkla koyu bulanık bir sözde eleman oluşturmak olabilir. Biraz daha az yükseklik ve daha genişlik ig ile yapın

Gölgeyi "silmek" için 1 bölme kullanabilirsiniz:

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

"Height:%;" ile oynayabilirsiniz. ve "genişlik:%;" istediğiniz gölgeyi silmek için.

Her ne sebeple olursa olsun, burada verilen cevaplar benim durumumda işe yaramaz. Böylece yaratıcı oldum. İşte linear-gradient()yerine kullandığınız her şey için yeni bir çözüm 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>

Bu konuyu tartışmaya çalışmama rağmen, bu gerçekten siz (biz) oluşturmaya çalıştığımız bir "kutu" değil, bu yüzden başlangıçta box-shadowmantıklı gelmediği söylenebilir .

Sadece sağ taraftaki bootstrap shadow-sm'i kopyalamaya çalıştım, işte kodum:

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