Bagaimana cara membuat drop shadow hanya di satu sisi elemen?

Apakah ada cara untuk menjatuhkan bayangan hanya di bagian bawah? Saya memiliki menu dengan 2 gambar di sebelah satu sama lain. Saya tidak ingin bayangan yang tepat karena tumpang tindih dengan gambar yang tepat. Saya tidak suka menggunakan gambar untuk ini, jadi apakah ada cara untuk menjatuhkannya hanya di bagian bawah seperti:

box-shadow-bottom: 10px #FFF; atau serupa?

-moz-box-shadow: 0px 3px 3px #000;
-webkit-box-shadow: 0px 3px 3px #000;
box-shadow-bottom: 5px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');

PEMBARUAN 4

Sama seperti pembaruan 3 tetapi dengan css modern (= aturan kurang) sehingga tidak diperlukan pemosisian khusus pada elemen pseudo.

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    position: absolute;
    top: calc(10% - 10px);
    left: calc(50% - 80px);
}

.box-shadow:after {
    content:"";
    position:absolute;
    width:100%;
    bottom:1px;
    z-index:-1;
    transform:scale(.9);
    box-shadow: 0px 0px 8px 2px #000000;
}

<div id="box" class="box-shadow"></div>

PEMBARUAN 3

Semua jawaban saya sebelumnya telah menggunakan markup tambahan untuk mendapatkan efek ini, yang belum tentu diperlukan. Saya pikir ini solusi yang jauh lebih bersih ... satu-satunya trik adalah bermain-main dengan nilai-nilai untuk mendapatkan posisi bayangan yang tepat serta kekuatan / opacity bayangan yang tepat. Ini biola baru, menggunakan elemen semu :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

<div id="box" class="box-shadow"></div>

CSS

#box {
    background-color: #3D6AA2;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

PEMBARUAN 2

Rupanya, Anda dapat melakukan ini hanya dengan parameter tambahan ke kotak-bayangan CSS seperti yang semua orang lain tunjukkan. Inilah demo:

http://jsfiddle.net/K88H9/821/

CSS

-webkit-box-shadow: 0 4px 4px -2px #000000;
   -moz-box-shadow: 0 4px 4px -2px #000000;
        box-shadow: 0 4px 4px -2px #000000;

Ini akan menjadi solusi yang lebih baik. Parameter tambahan yang ditambahkan dijelaskan sebagai:

Panjang keempat adalah jarak sebaran. Nilai positif menyebabkan bentuk bayangan melebar ke semua arah dengan radius yang ditentukan. Nilai negatif menyebabkan bentuk bayangan berkontraksi.

MEMPERBARUI

Lihatlah demo di jsFiddle: http://jsfiddle.net/K88H9/4/

Apa yang saya lakukan adalah membuat "elemen bayangan" yang akan bersembunyi di balik elemen sebenarnya yang Anda ingin memiliki bayangan. Saya membuat lebar "elemen bayangan" menjadi persis kurang lebar dari elemen sebenarnya dengan 2 kali bayangan yang Anda tentukan; kemudian saya menyelaraskannya dengan benar.

HTML

<div id="wrapper">
    <div id="element"></div>
    <div id="shadow"></div>
</div>

CSS

#wrapper {
    width: 84px;
    position: relative;
}
#element {
    background-color: #3D668F;
    height: 54px;
    width: 100%;
    position: relative;
    z-index: 10;
}
#shadow {
    background-color: #3D668F;
    height: 8px;
    width: 80px;
    margin-left: -40px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    z-index: 5;
    -webkit-box-shadow: 0px 2px 4px #000000;
       -moz-box-shadow: 0px 2px 4px #000000;
            box-shadow: 0px 2px 4px #000000;
}

Jawaban Asli

Ya, Anda dapat melakukan ini dengan sintaks yang sama dengan yang Anda berikan. Nilai pertama mengontrol posisi horisontal dan nilai kedua mengontrol posisi vertikal. Jadi cukup atur nilai pertama ke 0pxdan yang kedua untuk offset apa pun yang Anda inginkan sebagai berikut:

-webkit-box-shadow: 0px 5px #000000;
   -moz-box-shadow: 0px 5px #000000;
        box-shadow: 0px 5px #000000;

Untuk info lebih lanjut tentang bayangan kotak, periksa ini:

• http://www.css3.info/preview/box-shadow/
• https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility
• http://www.w3.org/TR/css3-background/#the-box-shadow

Saya harap ini membantu.

Cukup gunakan parameter sebaran untuk membuat bayangan lebih kecil:

.shadow {
  -webkit-box-shadow: 0 6px 4px -4px black;
  -moz-box-shadow: 0 6px 4px -4px black;
  box-shadow: 0 6px 4px -4px black;
}

<div class="shadow">Some content</div>

Demo langsung: http://dabblet.com/gist/a8f8ba527f5cff607327

Untuk tidak melihat bayangan di sisi, nilai (absolut dari) radius spread (parameter ke-4) harus sama dengan radius blur (parameter ke-3).

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

box-shadow: 
    -6px 0 white,         /*Left masking shadow*/
    6px 0 white,          /*Right masking shadow*/
    0 7px 4px -3px black; /*The real (slim) shadow*/

Perhatikan bahwa bayangan hitam harus menjadi yang terakhir, dan memiliki penyebaran negatif (-3px) untuk mencegahnya menyebar melampaui sudut.

Di sini biola (mengubah warna bayangan masking untuk melihat bagaimana hal itu benar-benar bekerja).

div{
    width: 100px;
    height: 100px;
    border: 1px solid pink;
    box-shadow: -6px 0 white, 6px 0 white, 0 7px 5px -2px black;
}

<div></div>

Saya pikir ini yang Anda cari?

.shadow {
  -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black;
  box-shadow: 0 0 0 4px white, 0 6px 4px black;
}

<div class="shadow">wefwefwef</div>

Itu selalu lebih baik untuk membaca spesifikasi . Tidak ada box-shadow-bottomproperti, dan seperti yang Lea tunjukkan, Anda harus selalu menempatkan properti yang tidak diawali di bagian bawah, setelah yang diawali.

Jadi begitu:

.shadow {
  -webkit-box-shadow: 0px 2px 4px #000000;
  -moz-box-shadow: 0px 2px 4px #000000;
  box-shadow: 0px 2px 4px #000000;
}

<div class="shadow">Some content</div>

Bagaimana kalau hanya menggunakan div yang berisi overflow diatur ke tersembunyi dan beberapa padding di bagian bawah? Ini sepertinya solusi paling sederhana.

Maaf untuk mengatakan bahwa saya tidak memikirkan ini sendiri tetapi melihatnya di tempat lain .

Menggunakan elemen untuk membungkus elemen mendapatkan bayangan kotak dan limpahan: disembunyikan di bungkus Anda bisa membuat bayangan kotak tambahan menghilang dan masih memiliki batas yang dapat digunakan. Ini juga memperbaiki masalah di mana elemen lebih kecil karena tampaknya, karena penyebaran.

Seperti ini:

#wrapper { padding-bottom: 10px; overflow: hidden; }
#elem { box-shadow: 0 0 10px black; }

Konten ada di sini

Masih solusi cerdas ketika harus dilakukan dalam CSS murni!

Seperti yang dikatakan oleh Jorgen Evens .

Anda juga dapat menggunakan clip-pathuntuk memotong (menyembunyikan) semua tepi yang meluap tetapi yang ingin Anda tampilkan:

.shadow {
  box-shadow: 0 4px 4px black;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

Lihat clip-path (MDN) . Argumen untuk polygonadalah titik kiri atas , titik kanan atas , titik kanan bawah , dan titik kiri bawah . Dengan mengatur tepi bawah ke 200%(atau angka apa pun yang lebih besar dari 100%) Anda membatasi luapan Anda hanya ke tepi bawah.

Saya juga membutuhkan bayangan tetapi hanya di bawah gambar dan diatur dalam sedikit kiri dan kanan. Ini bekerja untuk saya:

.box-shadow {
   -webkit-box-shadow: 5px 35px 30px -25px #888888;
      -moz-box-shadow: 5px 35px 30px -25px #888888;
           box-shadow: 5px 35px 30px -25px #888888;
}

Elemen yang digunakan untuk ini adalah gambar halaman-lebar (980px x 300px).

Jika itu membantu ketika mengutak-atik pengaturan, mereka dijalankan sebagai berikut:

bayangan horizontal, bayangan vertikal, jarak blur, penyebaran (ukuran bayangan), dan warna.

Lebih baik mencari bayangan:

.header{
    -webkit-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
    box-shadow: 0 -8px 73px 0 rgba(0,0,0,0.2);
}

kode ini sedang digunakan di web stackoverflow.

Pena kode ini (bukan oleh saya) menunjukkan cara super sederhana untuk melakukan ini dan pihak lain dengan cukup baik:

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

https://codepen.io/zeckdude/pen/oxywmm

Jika latar belakang Anda solid (atau Anda dapat mereproduksi menggunakan CSS), Anda dapat menggunakan gradien linier seperti itu:

div {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%)
}

<div>
<p>Foobar</p>
<p>test</p>
</div>

Ini akan menghasilkan gradien 5px di bagian bawah elemen, dari hitam pada opacity 30% hingga sepenuhnya transparan. Sisa elemen memiliki latar belakang putih. Tentu saja, dengan mengubah 2 pemberhentian warna terakhir dari gradien linier, Anda dapat membuat latar belakang sepenuhnya transparan.

Anda juga bisa hanya melakukan gradien di bagian bawah - ini membantu saya karena bayangan yang saya inginkan adalah pada elemen yang sudah semi-transparan, jadi saya tidak perlu khawatir tentang kliping:

&:after {
      content:"";
      width:100%;
      height: 8px;
      position: absolute;
      bottom: -8px;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    }

Jadikan properti "bawah" dan "tinggi" cocok dan atur nilai rgba Anda ke apa pun yang Anda inginkan berada di bagian atas / bawah bayangan

Anda dapat melakukannya seperti ini:

Sintaks umum:

selector {
   box-shadow: topBoxShadow, bottomBoxShadow, rightBoxShadow, leftBoxShadow
}

Contoh: kami hanya ingin membuat bayangan kotak bagian bawah dengan warna merah,

jadi untuk melakukan itu kita harus mengatur semua opsi sisi di mana kita harus mengatur opsi bayangan kotak bawah dan mengatur semua yang lain kosong sebagai berikut:

.box {
     -moz-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -o-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     -webkit-box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
     box-shadow: 0 0 0 transparent ,0 0 10px red, 0 0 0 transparent, 0 0 0 transparent
}

memperbarui pada orang lain jawabannya sisi transparan, bukan putih sehingga berfungsi pada latar belakang warna lain juga.

body {
  background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg)
}

div {
  background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center;
  background-size: contain;
  width: 100px;
  height: 100px;
  margin: 50px;
  border: 5px solid white;
  box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black;
}

<div>
</div>

bayangan batin

 .shadow {
   -webkit-box-shadow: inset 0 0 9px #000;
   -moz-box-shadow: inset 0 0 9px #000;
   box-shadow: inset 0 0 9px #000;
 }

<div class="shadow">wefwefwef</div>