Apakah mungkin untuk hanya memiliki kotak-bayangan sisipan di satu sisi div? Perhatikan bahwa saya sedang berbicara tentang bayangan kotak sisipan di sini, bukan bayangan kotak luar normal.

Misalnya, di JSFiddle berikut, Anda akan melihat bayangan sisipan muncul di keempat sisi, dalam derajat yang berbeda-beda.

Bagaimana cara membuatnya HANYA ditampilkan di atas? Atau paling HANYA di atas dan bawah?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Inilah yang Anda cari. Ini memiliki contoh untuk setiap sisi yang Anda inginkan dengan bayangan.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Lihat cuplikan untuk contoh lainnya:

body {
    background-color:#0074D9;
}
div {
    background-color:#ffffff;
    padding:20px;
    margin-top:10px;
}
.top-box {
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);
}
.left-box {
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.7);
}
.right-box {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}
.bottom-box {
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.7);
}
.top-gradient-box {
    background: linear-gradient(to bottom, #999 0, #ffffff 7px, #ffffff 100%);
}
.left-gradient-box {
    background: linear-gradient(to right, #999 0, #ffffff 7px, #ffffff 100%);
}
.right-gradient-box {
    background: linear-gradient(to left, #999 0, #ffffff 7px, #ffffff 100%);
}
.bottom-gradient-box {
    background: linear-gradient(to top, #999 0, #ffffff 7px, #ffffff 100%);
}

<div class="top-box">
        This area has a top shadow using box-shadow
</div>

<div class="left-box">
        This area has a left shadow using box-shadow
</div>

<div class="right-box">
        This area has a right shadow using box-shadow
</div>

<div class="bottom-box">
        This area has a bottom shadow using box-shadow
</div>

<div class="top-gradient-box">
        This area has a top shadow using gradients
</div>
<div class="left-gradient-box">
        This area has a left shadow using gradients
</div>
<div class="right-gradient-box">
        This area has a right shadow using gradients
</div>
<div class="bottom-gradient-box">
        This area has a bottom shadow using gradients
</div>

Triknya adalah bagian .box-innerdalam kedua , yang lebarnya lebih besar dari aslinya .box, dan box-shadowditerapkan untuk itu.

Kemudian, tambahkan lebih banyak bantalan untuk .textmenutupi lebar yang ditambahkan.

Beginilah tampilan logikanya:

Dan inilah cara melakukannya di CSS:

Gunakan lebar maksimal .inner-boxagar tidak menyebabkan .boxlebih lebar, dan overflowuntuk memastikan sisa terpotong:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

110% lebih lebar dari induk yang 100% dalam konteks anak (harus sama jika induk .boxmemiliki lebar tetap, misalnya). Margin negatif membuat lebar dan menyebabkan elemen berada di tengah (bukan hanya bagian kanan yang bersembunyi):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

Dan tambahkan beberapa padding pada sumbu X untuk membuat lebih luas .inner-box:

.text {
    padding: 20px 40px;
}

Ini Biola yang berfungsi.

Jika Anda memeriksa Fiddle, Anda akan melihat:

Agak terlambat, tetapi jawaban duplikat yang tidak memerlukan pengubahan padding atau menambahkan div tambahan dapat ditemukan di sini: Memiliki masalah dengan bagian bawah Inset box-shadow saja . Bunyinya, "Gunakan nilai negatif untuk panjang keempat yang menentukan jarak sebaran. Ini sering diabaikan, tetapi didukung oleh semua browser utama"

Dari biola penjawab :

box-shadow: inset 0 -10px 10px -10px #000000;

Ini hampir saja.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

coba saja, semoga bermanfaat ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

di atas CSSkarena Anda memiliki bayangan kotak di bawah.
Anda bisa lebih merah di sini

Ini mungkin bukan hal yang Anda cari, tetapi Anda dapat membuat efek yang sangat mirip dengan menggunakan rgbakombinasi dengan linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Ini menciptakan gradien linier dari hitam dengan 50% opacity ( rgba(0,0,0,.5)) ke transparent ( rgba(0,0,0,0)) yang mulai transparan 30% dari atas. Anda dapat bermain-main dengan nilai-nilai itu untuk menciptakan efek yang Anda inginkan. Anda dapat memilikinya di sisi lain dengan menambahkan nilai derajat ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) atau mengganti warnanya. Jika Anda menginginkan bayangan yang sangat kompleks seperti sudut yang berbeda di sisi yang berbeda, Anda bahkan dapat mulai melapisi linear-gradient.

Berikut ini cuplikan untuk melihatnya beraksi:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}

<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>

Inset Box Shadow hanya di sisi Atas?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }