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. Az előnézeti mező élőben frissül; másold be a teljes box-shadow deklarációt a CSS-be. Ismerje meg, hogyan változtatják meg az egyes paraméterek a magasságot és a mélységet próba-hiba nélkül a fejlesztői eszközökben.
X (px)
Y (px)
Elmosás (px)
Terjedés (px)
Szín
Átlátszóság (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
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.
Mikor válassz mást
• Ha több halmozott árnyékra van szüksége — másold ide az első réteget, majd fűzzen hozzá továbbiakat a CSS-ben.
• Ha szövegárnyékot szeretnél - más tulajdonság hasonló szintaxissal.
• Amikor árnyékolásra van szüksége szabálytalan PNG-alakzatokon — a szűrő: a drop-shadow() jobban működhet.
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.
Árnyékok rétegezése
Vesszővel elválasztott többszörös árnyék: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px,5rgba,(0,1,5); Az első árnyékfesték a későbbiek alá. Kombináljon egy szűk sötét árnyékot egy széles, világos árnyékkal a valósághű mélység érdekében.
Hozzáférhetőség és teljesítmény
A nagy, animált területeken lévő erős árnyékok a GPU festési idejébe kerülhetnek. Az adatsűrű felhasználói felületek esetében előnyben részesítse a finom árnyékokat. Gondoskodjon arról, hogy a fókuszált elemek láthatóak maradjanak — ne hagyatkozzon csak az árnyékra az állapot megjelenítéséhez; párosítsa szegéllyel vagy körvonallal a billentyűzetet használók számára.
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.
Elküldik az értékeket a szervernek?
Nem. Az előnézet és a CSS helyi.
Ingyenes?
Igen. Használd fiók nélkül és korlátlanul.