A box-shadow tulajdonság

A box-shadow tulajdonság egy blokkhoz ad árnyékot. Értékként a tulajdonság 6 paramétert fogad el, szóközzel elválasztva, vagy az none kulcsszót, amely teljesen eltávolítja az árnyékot.

Szintaxis

cssszelektor {
  box-shadow: inset eltolás_x eltolás_y elmosás árnyék_méret szín;
}

cssszelektor {
  box-shadow: none;
}

Paraméterek

Paraméter	Leírás
`inset`	Opcionális paraméter. Ha meg van adva, az árnyék a tárolón belül lesz, ha nincs megadva - akkor kívül.
eltolás x	Beállítja az árnyék eltolását az X tengely mentén. A pozitív érték jobbra tol, a negatív - balra.
eltolás y	Beállítja az árnyék eltolását az Y tengely mentén. A pozitív érték lefelé tol, a negatív - felfelé.
elmosás	Beállítja az árnyék elmosását. Minél nagyobb az érték - annál elmosódottabb lesz az árnyék. Opcionális paraméter. Ha nincs megadva - az árnyék éles lesz.
árnyék mérete	Beállítja az árnyék méretét. A pozitív érték nyújtja az árnyékot, a negatív érték, éppen ellenkezőleg, összenyomja. Opcionális paraméter. Ha nincs megadva - az árnyék akkora lesz, mint az elem.
szín	Beállítja az árnyék színét bármilyen szín egységben. Opcionális paraméter. Ha nincs megadva - az árnyék színe megegyezik a szöveg színével.

A tengelyek mentén történő eltolás, az elmosás és az árnyék mérete bármilyen méret egységben megadható, kivéve százalékban.

Példa

Ebben a példában az árnyék lefelé és jobbra van tolva, és kis elmosás van hozzáadva:

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

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

Результат:

Példa . Éles árnyék

Ebben a példában az árnyék lefelé és jobbra van tolva, de nincs elmosás (az árnyék éles lesz):

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

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

Результат:

Példa . Egyenletes árnyék

Ebben a példában az árnyék nincs eltolva, de hozzá van adva elmosás:

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

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

Результат:

Példa . Az árnyék mérete

Ebben a példában az árnyék nincs eltolva, az elmosás nulla, de hozzá van adva egy méret (a fekete - a szegély, a piros - az árnyék):

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

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

Результат:

Példa . Elmosás + árnyék mérete

Ebben a példában az árnyék nincs eltolva, de hozzá van adva elmosás és méret (a fekete - a szegély, a piros - az árnyék):

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

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

Результат:

Példa . Belső árnyék

Ebben a példában az árnyék a tároló belsejében helyezkedik el:

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

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

Результат:

Lásd még

a text-shadow tulajdonság,
amely szöveghez ad árnyékot