Properti box-shadow

Properti box-shadow mengatur bayangan untuk blok. Sebagai nilai, properti menerima 6 parameter, yang dicantumkan dipisahkan oleh spasi, atau kata kunci none, yang menonaktifkan bayangan sepenuhnya.

Sintaks

selector {
	box-shadow: inset geser_x geser_y blur ukuran_bayangan warna;
}

selector {
	box-shadow: none;
}

Parameter

Parameter	Keterangan
`inset`	Parameter opsional. Jika ditentukan, bayangan akan berada di dalam kontainer, jika tidak ditentukan - di luar.
geser x	Mengatur pergeseran bayangan pada sumbu X. Nilai positif menggeser ke kanan, nilai negatif - ke kiri.
geser y	Mengatur pergeseran bayangan pada sumbu Y. Nilai positif menggeser ke bawah, nilai negatif - ke atas.
blur	Mengatur blur (kekaburan) bayangan. Semakin besar nilainya, semakin kabur bayangannya. Parameter opsional. Jika tidak ditentukan, bayangan akan tajam.
ukuran bayangan	Mengatur ukuran bayangan. Nilai positif meregangkan bayangan, nilai negatif, sebaliknya, menyusutkannya. Parameter opsional. Jika tidak ditentukan, bayangan akan berukuran sama seperti elemen.
warna	Mengatur warna bayangan dalam satuan satuan untuk warna apa pun. Parameter opsional. Jika tidak ditentukan, warna bayangan akan sama dengan warna teks.

Pergeseran sumbu, blur, dan ukuran bayangan ditentukan dalam satuan satuan untuk ukuran apa pun, kecuali persentase.

Contoh

Dalam contoh ini, bayangan digeser ke bawah dan ke kanan dan ditambahkan sedikit blur:

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

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

Contoh . Bayangan Tajam

Dalam contoh ini, bayangan digeser ke bawah dan ke kanan, tetapi tidak ada blur (bayangan akan tajam):

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

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

Contoh . Bayangan Merata

Dalam contoh ini, bayangan tidak digeser, tetapi ditambahkan blur:

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

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

Contoh . Ukuran Bayangan

Dalam contoh ini, bayangan tidak digeser, blur bernilai nol, tetapi ditambahkan ukuran (hitam adalah border, merah adalah bayangan):

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

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

Contoh . Blur + Ukuran Bayangan

Dalam contoh ini, bayangan tidak digeser, tetapi ditambahkan blur dan ukuran (hitam adalah border, merah adalah bayangan):

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

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

Contoh . Bayangan Dalam

Dalam contoh ini, bayangan berada di dalam kontainer:

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

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

Lihat juga

properti text-shadow,
yang mengatur bayangan untuk teks