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