Уласцівасць box-shadow

Уласцівасць box-shadow задае цень блоку. У якасці значэння ўласцівасць прымае 6 параметраў, якія пералічваюцца праз прабел, альбо ключавое слова none, якое адмяняе цень наогул.

Сінтаксіс

селектар {
	box-shadow: inset зрух_па_x зрух_па_y размыццё памер_цені колер;
}

селектар {
	box-shadow: none;
}

Параметры

Параметр	Апісанне
`inset`	Неабавязковы параметр. Калі ён зададзены, то цень будзе ўнутры кантэйнера, калі не зададзены - то звонку.
зрух па x	Задае зрушэнне цені па восі X. Дадатнае значэнне зрушвае направа, адмоўнае - налева.
зрух па y	Задае зрушэнне цені па восі Y. Дадатнае значэнне зрушвае ўніз, адмоўнае - уверх.
размыццё	Задае размыццё цені. Чым больш значэнне - тым больш размытай будзе цень. Неабавязковы параметр. Калі не зададзены - цень будзе выразнай.
памер цені	Задае памер цені. Дадатнае значэнне расцягвае цень, адмоўнае, наадварот, яе сціскае. Неабавязковы параметр. Калі не зададзены - цень будзе такога жа памеру, што і элемент.
колер	Задае колер цені ў любых адзінках вымярэння для колеру. Неабавязковы параметр. Калі не зададзены - колер цені супадае з колерам тэксту.

Зрушэнні па восях, размыццё і памер цені задаюцца ў любых адзінках вымярэння для памераў, акрамя працэнтаў.

Прыклад

У гэтым прыкладзе цень зрушана ўніз і направа і дадана невялікае размыццё:

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

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

Прыклад . Выразная цень

У гэтым прыкладзе цень зрушана ўніз і направа, але размыцця няма (цень будзе выразнай):

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

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

Прыклад . Раўнамерная цень

У гэтым прыкладзе цень не зрушана, але да яе дадана размыццё:

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

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

Прыклад . Памер цені

У гэтым прыкладзе цень не зрушана, размыццё роўна нулю, але да яе даданы памер (чорнае - гэта мяжа, чырвонае - гэта цень):

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

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

Прыклад . Размыццё + памер цені

У гэтым прыкладзе цень не зрушана, але да яе даданы размыццё і памер (чорнае - гэта мяжа, чырвонае - гэта цень):

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

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

Прыклад . Унутраная цень

У гэтым прыкладзе цень знаходзіцца ўнутры кантэйнера:

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

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

Глядзіце таксама

уласцівасць text-shadow,
якая задае цень тэксту