Használata
- Kezdjen egy előre beállított értékkel, vagy állítsa be az első réteg eltolását, elmosását, terjedését, színét és átlátszatlanságát.
- Adjon hozzá további rétegeket a természetesebb mélység érdekében, vagy jelölje be az „Inset” lehetőséget belső árnyékhoz.
- Módosítsa az előnézet hátterét és a doboz színét, hogy illeszkedjen a tervéhez, majd másolja ki a CSS-t.
Hogyan működik
A box-shadow rétegenként a következőket veszi fel: vízszintes eltolás, függőleges eltolás, elmosás sugara, terjeszkedés sugara és szín, opcionálisan inset előtaggal. A pozitív eltolások jobbra és lefelé mozgatják az árnyékot. Az elmosás lágyítja a széleket, és nem lehet negatív; a terjeszkedés növeli (pozitív) vagy csökkenti (negatív) az árnyékot az elmosás előtt. A többszörös rétegeket vessző választja el, és az első réteg kerül legfelülre.
A valósághű kiemelés általában egy kis, szűk árnyékot kombinál egy nagyobb, lágyabb, alacsony átlátszatlanságú árnyékkal; ezt csinálja az „Elevated” előbeállítás. A színek rgba() formában vannak megadva, így az átlátszatlanság egyértelmű. Az árnyékok követik az elem border-radius értékét, és nem foglalnak helyet az elrendezésben, ezért soha nem mozdítanak el más elemeket.
A nagyon nagy blur értékű árnyékok sok elemen lassabb görgetést okozhatnak a gyengébb telefonokon. Ha árnyékot animál, általában simább, ha egy olyan pszeudoelemet úsztat be, amely már tartalmazza az árnyékot, mint ha magát a box-shadow-t animálja.
Példák
Kártya világos oldalon
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); éles szegélyt és lágy kiemelést ad egy kártyának.
Fókuszgyűrű elrendezés eltolódása nélkül
Egy 0 eltolású, 0 blur értékű és 3px terjedésű réteg a márkaszínnel tömör gyűrűt rajzol egy gomb köré. A szegéllyel ellentétben nem változtatja meg az elem méretét.
Lenyomott beviteli mező
Az inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) kissé bemélyedő hatást ad a szövegmezőnek.
Gyakori kérdések
Mi a különbség a box-shadow és a filter: drop-shadow() között?
A box-shadow az elem dobozát és border-radiusát követi, és támogatja a spread és inset értékeket. A drop-shadow() a látható alakzatot követi, beleértve a PNG- vagy SVG-képek átlátszó területeit is, de nem támogatja a spread és inset értékeket.
Miért vágódik le az árnyékom?
Ha a szülőelem overflow: hidden tulajdonsággal rendelkezik, mindent levág, ami a dobozán kívül esik, beleértve az árnyékokat is. Adjon paddingot a szülőelemhez, vagy helyezze át az overflow szabályt.
Hány réteget érdemes használni?
A legtöbb felülethez egy vagy kettő is elegendő. Több réteg simábbnak tűnhet, de kicsit több megjelenítési költséggel jár, ami hosszú listáknál számít.
Adatvédelem
A CSS az Ön böngészőjében készül. Semmi nem kerül feltöltésre vagy tárolásra.