Box-shadow häsiýeti

box-shadow häsiýeti blok üçin kölege kesgitleýär. Häsiýet baha hökmünde 6 parametr kabul edýär, boşluk bilen sanalýar, ýa-da açar söz none, kölegäni doly ýatyrmak üçin.

Sintaksis

cssselektory {
  box-shadow: inset x boýunça göçüriş y boýunça göçüriş bulanma kölegeniň ölçegi reňk;
}

cssselektory {
  box-shadow: none;
}

Parametrler

Parametr	Düşündiriş
`inset`	Hökmany bolmadyk parametr. Eger berlen bolsa, kölege konteýneriň içinde bolar, berlen bolmasa - daşynda.
x boýunça göçüriş	X oky boýunça kölegeniň göçürmesini kesgitleýär. Positive baha sag tarapa göçürýär, negatiw - çep tarapa.
y boýunça göçüriş	Y oky boýunça kölegeniň göçürmesini kesgitleýär. Positive baha aşak göçürýär, negatiw - ýokary.
bulanma	Kölegeniň bulanmasyny kesgitleýär. Baha näçe uly bolsa, kölege şonça-da bulanjak bolar. Hökmany bolmadyk parametr. Eger berlen bolmasa - kölege ýitilik bolar.
kölegeniň ölçegi	Kölegeniň ölçegini kesgitleýär. Positive baha kölegäni giňeldýär, negatiw baha, tersine, ony daraldýar. Hökmany bolmadyk parametr. Eger berlen bolmasa - kölege element bilen deň ölçegde bolar.
reňk	Kölegeniň reňkini islendik reňk üçin birliklerde kesgitleýär. Hökmany bolmadyk parametr. Eger berlen bolmasa - kölegeniň reňki tekst reňki bilen gabat gelýär.

Oklar boýunça göçürmeler, bulanma we kölegeniň ölçegi islendik ölçeg üçin birliklerde berlip bilner, göterimlerden başga.

Mysal

Bu mysalda kölege aşak we saga göçürilýär we kiçi bir bulanma goşulýar:

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

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

Результат:

Mysal . Ýitilik kölege

Bu mysalda kölege aşak we saga göçürilýär, ýöne bulanma ýok (kölege ýitilik bolar):

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

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

Результат:

Mysal . Deňýönlüli kölege

Bu mysalda kölege göçürilenok, ýöne oňa bulanma goşulýar:

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

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

Результат:

Mysal . Kölegeniň ölçegi

Bu mysalda kölege göçürilenok, bulanma nola deň, ýöne oňa ölçeg goşulýar (gara - bu çägidir, gyzyl - bu kölegedir):

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

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

Результат:

Mysal . Bulanma + kölegeniň ölçegi

Bu mysalda kölege göçürilenok, ýöne oňa bulanma we ölçeg goşulýar (gara - bu çägidir, gyzyl - bu kölegedir):

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

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

Результат:

Mysal . Içki kölege

Bu mysalda kölege konteýneriň içinde ýerleşýär:

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

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

Результат:

Şeýle-de garaşyň

text-shadow häsiýeti,
tekst üçin kölege kesgitleýär