Properti box-shadow CSS

Definisi dan penggunaan

Atribut box-shadow menambahkan satu atau lebih bayangan ke bingkai.

Petunjuk:Gunakan atribut border-image-* untuk membangun tombol yang indah dan dapat berubah ukuran!

Lihat pula:

Panduan pelatihan CSS3:Batasan CSS3

Panduan referensi HTML DOM:Atribut boxShadow

Contoh

Tambahkan box-shadow ke elemen div:

div
{
box-shadow: 10px 10px 5px #888888;
}

Coba sendiri

Ada banyak contoh lain di bawah halaman.

Syntaks CSS

box-shadow: h-shadow v-shadow blur spread color inset;

Komentar:box-shadow menambahkan satu atau lebih bayangan ke bingkai. Atribut ini adalah daftar bayangan yang dipisahkan koma, setiap bayangan ditentukan oleh 2-4 nilai panjang, nilai warna pilihan, dan kata kunci pilihan inset. Nilai yang diabaikan adalah 0.

Nilai atribut

Nilai Deskripsi Pengujian
h-shadow Wajib. Lokasi bayangan horizontal. Mengizinkan nilai negatif. Pengujian
v-shadow Wajib. Lokasi bayangan vertikal. Mengizinkan nilai negatif. Pengujian
blur Pilihan. Jarak blur. Pengujian
spread Pilihan. Ukuran bayangan. Pengujian
color Pilihan. Warna bayangan. Lihat nilai warna CSS. Pengujian
inset Pilihan. Ubah bayangan luar (outset) menjadi bayangan dalam. Pengujian

Detil teknis

Nilai default: none
Inheritance: no
Versi: CSS3
Syntaks JavaScript: object.style.boxShadow="10px 10px 5px #888888"

Beberapa contoh lain

Gambar yang dilempar ke atas meja
Contoh ini menunjukkan bagaimana membuat gambar 'Polaroid' dan memutar gambar.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini penuh.

Angka yang diawali dengan -webkit- atau -moz- menunjukkan versi awal yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5