Digunakan dalam menghasilkan bayangan (sering disebut "Drop Shadows", seperti di Photoshop) dari elemen. Berikut adalah contoh dengan dukungan browser 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 horizontal (wajib) bayangan, positif berarti bayangan akan berada di sebelah kanan kotak, offset negatif akan meletakkan bayangan di sebelah kiri kotak.
- Offset vertikal (wajib) bayangan, negatif berarti kotak-bayangan akan berada di atas kotak, positif berarti bayangan akan berada di bawah kotak.
- Radius blur (wajib), jika diatur ke 0 bayangan akan tajam, semakin tinggi angkanya, semakin buram, dan semakin jauh bayangan akan meluas. Misalnya bayangan dengan 5px ofset horizontal yang juga memiliki radius blur 5px akan menjadi 10px dari total shadow.
- Radius penyebaran (opsional), nilai positif meningkatkan ukuran bayangan, nilai negatif mengurangi ukuran. Default-nya adalah 0 (bayangannya berukuran sama dengan blur).
- Warna (wajib) - mengambil nilai warna apa pun, seperti hex, bernama, rgba, atau hsla. Jika nilai warna dihilangkan, bayangan kotak digambar dengan warna latar depan (teks
color). Namun perlu diketahui, browser WebKit yang lebih lama (sebelum Chrome 20 dan Safari 6) mengabaikan aturan saat warna dihilangkan.
Menggunakan warna semi-transparan seperti rgba(0, 0, 0, 0.4)yang paling umum, dan efek yang bagus, karena tidak sepenuhnya / opaquely menutupi apa yang telah berakhir, tetapi memungkinkan apa yang di bawahnya terlihat sedikit, seperti bayangan nyata.
Contoh
Bayangan Batin
.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )Contoh
Internet Explorer (8 dan bawah) Box Shadow
Anda membutuhkan 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; )Hanya Satu Sisi
Dengan menggunakan radius sebaran negatif, Anda bisa masuk ke dalam bayangan kotak dan hanya mendorongnya dari satu sisi kotak.
.one-edge-shadow ( box-shadow: 0 8px 6px -6px black; )Beberapa Perbatasan & Lainnya
Anda dapat memisahkan box-shadow dengan koma sebanyak yang Anda mau. Misalnya, ini menunjukkan dua bayangan dengan posisi berbeda dan warna berbeda pada elemen yang sama:
box-shadow: inset 5px 5px 10px #000000, inset -5px -5px 10px blue;Contoh ini menunjukkan bagaimana Anda bisa menggunakannya untuk membuat banyak perbatasan:
Lihat kesejukan box-shadow Pen Multiple! oleh Chris Coyier (@chriscoyier) di CodePen.
Dengan menerapkan bayangan ke elemen semu yang kemudian Anda manipulasi, Anda bisa mendapatkan bayangan kotak 3D yang cukup mewah:
Lihat Efek Bayangan Kotak CSS3 Pena oleh Halil İbrahim Nuroğlu (@haibnu) di CodePen.
Bayangan super halus melalui beberapa nilai yang dipisahkan koma:
Lihat Pen
smooth box-shadow oleh Chris Coyier (@chriscoyier)
di CodePen.
Dukungan Browser
Lihat cuplikan di bagian atas halaman untuk spesifik pada cakupan awalan vendor. Ini adalah salah satu properti di mana menghapus prefiks cukup masuk akal pada saat ini.