Својството 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,
кое задава сенка на текстот