Sifat box-shadow

Sifat box-shadow menetapkan bayang-bayang untuk blok. Sebagai nilai, sifat ini menerima 6 parameter, disenaraikan dengan ruang, atau kata kunci none, yang membatalkan bayang-bayang secara keseluruhan.

Sintaks

pemilih {
	box-shadow: inset anjakan_x anjakan_y kelimunan saiz_bayang-bayang warna;
}

pemilih {
	box-shadow: none;
}

Parameter

Parameter	Keterangan
`inset`	Parameter pilihan. Jika dinyatakan, bayang-bayang akan berada di dalam kontena, jika tidak dinyatakan - di luar.
anjakan x	Menetapkan anjakan bayang-bayang pada paksi X. Nilai positif menggeser ke kanan, nilai negatif - ke kiri.
anjakan y	Menetapkan anjakan bayang-bayang pada paksi Y. Nilai positif menggeser ke bawah, nilai negatif - ke atas.
kelimunan	Menetapkan kelimunan bayang-bayang. Semakin besar nilai - semakin kabur bayang-bayangnya. Parameter pilihan. Jika tidak dinyatakan - bayang-bayang akan tajam.
saiz bayang-bayang	Menetapkan saiz bayang-bayang. Nilai positif meregangkan bayang-bayang, nilai negatif, sebaliknya, mengecilkannya. Parameter pilihan. Jika tidak dinyatakan - bayang-bayang akan bersaiz sama dengan elemen.
warna	Menetapkan warna bayang-bayang dalam sebarang unit untuk warna. Parameter pilihan. Jika tidak dinyatakan - warna bayang-bayang sama dengan warna teks.

Anjakan pada paksi, kelimunan dan saiz bayang-bayang dinyatakan dalam sebarang unit untuk saiz, kecuali peratusan.

Contoh

Dalam contoh ini, bayang-bayang digeser ke bawah dan ke kanan dan ditambahkan kelimunan kecil:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Contoh . Bayang-bayang Tajam

Dalam contoh ini, bayang-bayang digeser ke bawah dan ke kanan, tetapi tiada kelimunan (bayang-bayang akan tajam):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Contoh . Bayang-bayang Seragam

Dalam contoh ini, bayang-bayang tidak digeser, tetapi ditambahkan kelimunan:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Contoh . Saiz Bayang-bayang

Dalam contoh ini, bayang-bayang tidak digeser, kelimunan sama dengan sifar, tetapi ditambahkan saiz (hitam - ialah sempadan, merah - ialah bayang-bayang):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Contoh . Kelimunan + Saiz Bayang-bayang

Dalam contoh ini, bayang-bayang tidak digeser, tetapi ditambahkan kelimunan dan saiz (hitam - ialah sempadan, merah - ialah bayang-bayang):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Contoh . Bayang-bayang Dalaman

Dalam contoh ini, bayang-bayang terletak di dalam kontena:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Lihat juga

sifat text-shadow,
yang menetapkan bayang-bayang untuk teks