CSS-doboz-árnyék-generátor
A doboz-árnyékértékek vizuális megalkotása. Állítsd be a vízszintes és függőleges eltolást képpontokban, az elmosódási sugarat (lágy szél), az eloszlást (az árnyékot az elmosódás előtt növelje vagy csökkentse), a színt, az átlátszatlanságot és a belső árnyékok opcionális beillesztését.
Hogyan készítsünk árnyékolódobozt
1. Állítsd be az X és Y eltolást — a pozitív X az árnyékot jobbra, a pozitív Y pedig lefelé mozgatja.
2. Az elmosódás (lágyság) és a terjedés beállítása (az elmosódás előtti méret).
3. Válaszd ki az árnyék színét és átlátszatlanságát.
4. Válaszd be a beillesztést, ha az árnyéknak meg kell jelennie; másold a CSS-t.
Árnyékreceptek
Lágy kártya magasság
offsetY 8px, elmosás 24px, szórás 0, fekete 18%-os átlátszatlanságnál — anyagszerű lebegő kártya: box-shadow:204p8px: rgba(20,20,20,0.18).
Éles vetett árnyék
elmosás 0, szórás 0, offsetY 4px — kemény szél, mint egy matrica kissé kiemelve az oldalról.
Beillesztés lenyomott gomb
Beillesztés engedélyezése kis elmosódással — szimulálja az elemen belüli nyomott vagy süllyesztett vezérlőt.
Mikor használd ezt az eszközt
• Amikor hangolja a felhasználói felület mélységét a kártyákhoz, modálokhoz és gombokhoz.
• Amikor megtanulja, hogy miben különbözik az elmosódás a szórtságtól.
• Amikor a tervezési tokeneket pontos árnyékértékekkel dokumentálja.
A négy szám beolvasása
box-shadow: 0 8px 24px, 0 jelentése x=2, pxy = x=2 spread=0. Hagyja ki a szórást, és a böngészők alapértelmezett szórása 0. A nagy elmosódás nulla eltolással ragyogást hoz létre; nagy eltolás kis elmosódással irányított fényt hoz létre.
Gyakori kérdések
Mi a box-shadow szintaxis?
box-shadow: offset-x offset-y blur-radius spread-radius color; Az opcionális beszúrt kulcsszó belső árnyékot hoz létre.
Elmosódás vagy szóródás?
Az elmosódás lágyítja az árnyék szélét. A szórás kiterjeszti vagy összehúzza az árnyék alakját az elmosódás előtt — a pozitív szórás megnöveli, a negatív zsugorodik.
Milyen egységeket használdk?
Ez az eszköz pixeleket (px) ad ki, ami a legáltalánosabb választás a képernyő UI árnyékaihoz.
Mit csinál az inset?
A beillesztés az árnyékot az elem szegélydobozán belülre rajzolja — hasznos süllyesztett bemeneteknél vagy kutaknál.
Lehet-e félig átlátszó az árnyékszín?
Igen. Az átlátszatlanságot alkalmazza a kiválasztott szín, ami rgba kimenetet hoz létre a sima élekért a változatos háttereken.