CSS box-shadow 属性

definisi dan penggunaan

ciri boxShadow menambahkan satu atau lebih bayangan ke bingkai.

tanda tanya:Guna ciri border-image-* untuk membuat butang yang indah dan boleh berubah saiz!

lihat juga:

panduan CSS3:Kereta pinggir CSS3

panduan HTML DOM:ciri boxShadow

contoh

tambahkan box-shadow kepada elemen div:

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

cuba sendiri

ada lagi contoh di bawah halaman.

gramama CSS

box-shadow: h-shadow v-shadow kabur lebar warna inset;

catatan:box-shadow menambahkan satu atau lebih bayangan ke bingkai. Ciri ini adalah senarai bayangan yang dipisahkan dengan koma, di mana setiap bayangan ditentukan oleh 2-4 nilai panjang, nilai warna pilihan serta kata kunci pilihan inset.

nilai ciri

nilai perincian pengujian
h-shadow wajib. Kedudukan bayangan menegah. Ia membenarkan nilai negatif. pengujian
v-shadow wajib. Kedudukan bayangan menegak. Ia membenarkan nilai negatif. pengujian
kabur pilihan. Jarak kabur. pengujian
lebar pilihan. Saiz bayangan. pengujian
warna pilihan. Warna bayangan. Lihat nilai warna CSS. pengujian
inset pilihan. Ubah bayangan luar (outset) kepada bayangan dalaman. pengujian

perincian teknologi

nilai lalai: tiada
kebolehan warisan: tidak
versi: CSS3
gramama JavaScript: objek.style.boxShadow="10px 10px 5px #888888"

contoh lain

gambar yang dilempar ke atas meja
contoh ini memperlihatkan bagaimana untuk membuat gambar 'Polaroid' dan memutar gambar.

keupayaan pereka pereka

nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong ciri ini.

nombor yang mempunyai -webkit- atau -moz- menunjukkan versi pertama yang digunakan dengan 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