Cara apa pun untuk mendapatkan bayangan kotak di sisi kiri & kanan (horizontal?) Hanya tanpa peretasan atau gambar. Saya menggunakan:

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

Tapi itu memberi bayangan di sekitar.

Saya tidak memiliki batas di sekitar elemen.

CATATAN: Saya sarankan memeriksa jawaban @ Hamish di bawah ini; itu tidak melibatkan "masking" yang tidak sempurna dalam solusi yang dijelaskan di sini.

Anda bisa dekat dengan banyak bayangan kotak; satu untuk setiap sisi

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/

Edit

Tambahkan 2 bayangan kotak lagi untuk bagian atas dan bawah depan untuk menutupi yang berdarah.

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/

Saya tidak puas dengan bagian atas dan bawah yang dibulatkan ke bayangan yang ada dalam solusi Deefour sehingga saya buat sendiri.

inset box-shadow menciptakan bayangan seragam yang bagus dengan potongan atas dan bawah.

Untuk menggunakan efek ini di sisi elemen Anda, buat dua elemen semu :beforedan :afterposisikan secara absolut di sisi elemen asli.

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>

Edit

Tergantung pada desain Anda, Anda mungkin dapat menggunakan clip-path, seperti yang ditunjukkan pada jawaban @ Luke. Namun, perhatikan bahwa dalam banyak kasus ini masih menghasilkan pengurangan bayangan di bagian atas dan bawah seperti yang Anda lihat dalam contoh ini:

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>

Coba ini, ini bekerja untuk saya:

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

Pendekatan klasik: Penyebaran negatif

CSS box-shadow menggunakan 4 parameter: h-shadow, v-shadow, blur, spread:

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

The v-shadow (bayangan verical) diatur ke 0.

The blur parameter menambahkan efek gradien, tetapi menambahkan juga bayangan kecil di perbatasan vertikal (yang kita ingin menyingkirkan).

Spread negatif mengurangi bayangan di semua batas: Anda dapat bermain dengannya mencoba menghilangkan bayangan vertikal kecil tanpa mempengaruhi terlalu banyak yang mematuhi sisi (lebih mudah untuk bayangan kecil, 5 hingga 10px.)

Berikut contoh biola .

Pendekatan kedua: Absolute div di samping

Tambahkan div kosong di elemen Anda, dan gaya itu dengan posisi absolut sehingga tidak mempengaruhi konten elemen.

Di sini biola dengan contoh bayangan kiri.

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

Ketiga: Masking shadow

Jika Anda memiliki latar belakang tetap, Anda dapat menyembunyikan efek bayangan sisi dengan dua bayangan masking yang memiliki warna latar yang sama dan blur = 0, contoh:

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

Saya telah menambahkan lagi sebaran negatif (-3px) ke bayangan hitam, sehingga tidak meluas di luar sudut.

Sini biola .

Ini berfungsi dengan baik untuk semua browser:

-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

Anda harus menggunakan banyak box-shadow;. Properti inset membuatnya terlihat bagus dan di dalam

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

Cara lain adalah dengan: overflow-y:hiddenpada induk dengan padding.

#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-pathsekarang (2020) cara terbaik yang saya temukan untuk mencapai bayangan kotak pada sisi elemen tertentu, terutama ketika efek yang diperlukan adalah bayangan "potongan bersih" di bagian tertentu , seperti ini:

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

... sebagai lawan dari bayangan yang dilemahkan / dikurangi / menipis seperti ini:

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

Cukup terapkan CSS berikut ke elemen yang dimaksud:

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

Dimana:

• Apx mengatur visibilitas bayangan untuk tepi atas
• Bpx Baik
• Cpx bawah
• Dpx kiri

Masukkan nilai 0 untuk setiap tepi di mana bayangan harus disembunyikan dan nilai negatif (sama dengan hasil gabungan dari radius blur + nilai sebaran - Xpx + Ypx) ke tepi mana pun di mana bayangan harus ditampilkan.

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

Ini bekerja di pihak saya. Semoga ini bisa membantu Anda.

NAD INSET BAGUS PADA KIRI DAN SISI YANG TEPAT UNTUK DIV, GAMBAR ATAU ISI INNER

Untuk bayangan sisipan yang bagus di sisi kanan dan kiri pada gambar, atau konten lainnya, gunakan dengan cara ini

*** Indeks-z: -1 melakukan trik yang bagus saat menampilkan gambar atau objek dalam dengan insets

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

Dalam beberapa situasi Anda dapat menyembunyikan bayangan dengan wadah lain. Misalnya, jika ada DIV di atas dan di bawah DIV dengan bayangan, Anda dapat menggunakan position: relative; z-index: 1;DIV sekitarnya.

Untuk horizontal saja, Anda bisa menipu bayangan kotak menggunakan overflow pada div induknya:

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

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

Gagasan lain dapat menciptakan elemen pseudo kabur gelap akhirnya dengan transparansi untuk meniru bayangan. Buat dengan ketinggian sedikit lebih sedikit dan lebih banyak ig

Anda dapat menggunakan 1 div di dalamnya untuk "menghapus" bayangan:

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

Anda dapat bermain dengan "tinggi:%;" dan "lebar:%;" untuk menghapus bayangan apa yang Anda inginkan.

Untuk alasan apa pun jawaban yang diberikan di sini tidak akan berfungsi dalam kasus saya. Jadi, saya jadi kreatif. Berikut adalah solusi baru untuk Anda semua yang menggunakan linear-gradient()di tempat 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>

Meskipun saya tidak ingin memperdebatkan hal ini, ini sebenarnya bukan "kotak" yang Anda (kami) coba bentuk, jadi saya kira bisa dikatakan itu box-shadowtidak masuk akal untuk memulai.

Saya mencoba menyalin bootstrap shadow-sm tepat di sebelah kanan, ini kode saya:

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