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

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

Сінтаксіс

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

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

Параметры

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

Прыклад

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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