Box-shadow касиети

box-shadow касиети блокуна көлөкө тартат. Касиеттин мааниси катары 6 параметр боштук аркылуу берилет, же none ачкыч сөзү, көлөкөнү толугу менен жокко чыгарат.

Синтаксис

cssтандоочу {
  box-shadow: inset x_боюнча_жылышуу y_боюнча_жылышуу чачыроо көлөкөнүн_өлчөмү түс;
}

cssтандоочу {
  box-shadow: none;
}

Параметрлер

Параметр	Сүрөттөмө
`inset`	Милдеттүү эмес параметр. Эгер ал берилсе, анда көлөкө контейнердин ичинде болот, эгер берилбесе - сыртында.
x боюнча жылышуу	X огу боюнча көлөкөнү жылдырууну белгилейт. Оң маани оңго жылдырат, терс маани - солго.
y боюнча жылышуу	Y огу боюнча көлөкөнү жылдырууну белгилейт. Оң маани төмөн жылдырат, терс маани - жогору.
чачыроо	Көлөкөнүн чачыроосун белгилейт. Мааниси канчалык чоң болсо, көлөкө ошончолук чачыранды болот. Милдеттүү эмес параметр. Эгер берилбесе - көлөкө так болот.
көлөкөнүн өлчөмү	Көлөкөнүн өлчөмүн белгилейт. Оң маани көлөкөнү созот, терс маани, тескерисинче, аны кысат. Милдеттүү эмес параметр. Эгер берилбесе - көлөкө элементтин өлчөмүндөй болот.
түс	Көлөкөнүн түсүн түстүн каалаган бирдиктеринде белгилейт. Милдеттүү эмес параметр. Эгер берилбесе - көлөкөнүн түсү тексттин түсү менен дал келет.

Октор боюнча жылышуулар, чачыроо жана көлөкөнүн өлчөмү өлчөмдөр үчүн каалаган бирдиктерде берилет, пайыздардан башка.

Мисал

Бул мисалда көлөкө төмөн жана оңго жылдырылган жана кичине чачыроо кошулган:

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;
}

Результат:

Ошондой эле караңыз

text-shadow касиети,
ал текстке көлөкө тартат