Digunakan dalam membuang bayangan (sering disebut "Drop Shadows", seperti di Photoshop) dari elemen. Berikut adalah contoh dengan sokongan penyemak imbas sedalam mungkin:
.shadow ( -webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */ -moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 - 3.6 */ box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */ )Itu:
box-shadow: (horizontal offset) (vertical offset) (blur radius) (optional spread radius) (color);- Offset mendatar (diperlukan) bayangan, positif bermaksud bayangan akan berada di sebelah kanan kotak, ofset negatif akan meletakkan bayangan di sebelah kiri kotak.
- Offset menegak (diperlukan) bayangan, yang negatif bermaksud bayangan kotak akan berada di atas kotak, yang positif bermaksud bayangan akan berada di bawah kotak.
- Radius kabur (diperlukan), jika diatur ke 0 bayangan akan menjadi tajam, semakin tinggi bilangannya, semakin kabur, dan semakin jauh bayangan akan memanjang. Contohnya bayangan dengan 5px ofset mendatar yang juga mempunyai radius kabur 5px akan menjadi 10px jumlah bayangan.
- Radius penyebaran (pilihan), nilai positif meningkatkan ukuran bayangan, nilai negatif menurunkan ukuran. Lalai adalah 0 (bayangan sama dengan kabur).
- Warna (wajib) - mengambil nilai warna apa pun, seperti hex, bernama, rgba atau hsla. Sekiranya nilai warna dihilangkan, bayangan kotak dilukis dengan warna latar depan (teks
color). Tetapi ketahuilah, penyemak imbas WebKit yang lebih tua (pra Chrome 20 dan Safari 6) mengabaikan peraturan apabila warna dihilangkan.
Menggunakan warna separa telus seperti rgba(0, 0, 0, 0.4)yang paling biasa, dan kesan yang baik, kerana ia tidak menutup sepenuhnya / tidak jelas apa yang sudah berakhir, tetapi membenarkan apa yang ada di bawahnya ditunjukkan sedikit, seperti bayangan sebenar.
Contohnya
Bayang dalaman
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Contohnya
Internet Explorer (8 ke bawah) Box Shadow
Anda memerlukan elemen tambahan, tetapi dapat dilakukan dengan filter.
Box-shadowed element .shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); -webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )Satu Bahagian Sahaja
Dengan menggunakan radius penyebaran negatif, anda dapat menekan bayangan kotak dan hanya mengeluarkannya dari satu tepi kotak.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Pelbagai Sempadan & Banyak Lagi
Anda boleh memisahkan koma bayangan kotak sekerap yang anda mahu. Sebagai contoh, ini menunjukkan dua bayangan dengan kedudukan yang berbeza dan warna yang berbeza pada elemen yang sama:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Contohnya menunjukkan bagaimana anda boleh menggunakannya untuk membuat berbilang sempadan:
Lihat kesegaran kotak-bayangan Pen Multiple! oleh Chris Coyier (@chriscoyier) di CodePen.
Dengan menerapkan bayang-bayang pada elemen semu yang kemudian anda manipulasi, anda boleh mendapatkan bayangan kotak 3D yang sangat menarik:
Lihat Kesan Bayangan Kotak Pen CSS3 oleh Halil İbrahim Nuroğlu (@haibnu) di CodePen.
Bayangan yang sangat halus melalui pelbagai nilai yang dipisahkan koma:
Lihat
bayangan kotak Pen halus oleh Chris Coyier (@chriscoyier)
di CodePen.
Sokongan Penyemak Imbas
Lihat potongan di bahagian atas halaman untuk mengetahui spesifik mengenai liputan awalan vendor. Ini adalah salah satu sifat di mana menjatuhkan awalan cukup masuk akal ketika ini.