Digunakan dalam membuang bayangan elemen tahap blok (seperti div).
.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )- Offset bayangan mendatar , positif bermaksud bayangan akan berada di sebelah kanan kotak, ofset negatif akan meletakkan bayangan di sebelah kiri kotak.
- Offset bayangan menegak , yang negatif bermaksud bayangan kotak akan berada di atas kotak, yang positif bermaksud bayangan akan berada di bawah kotak.
- Radius kabur (pilihan), jika diatur ke 0 bayangan akan menjadi tajam, semakin tinggi bilangannya, semakin kabur.
- Radius penyebaran (pilihan), nilai positif meningkatkan ukuran bayangan, nilai negatif menurunkan ukuran. Lalai adalah 0 (bayangan sama dengan kabur).
- Warna
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
Bayangan Kotak Penjelajah Internet
Anda memerlukan elemen tambahan ...
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 ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )Berkaitan
- CSS3: nilai spread dan bayangan kotak di satu sisi sahaja
- Dokumen Mozilla
- Berbilang Sempadan dengan
box-shadow.