Hogyan készítsünk belső árnyékot a CSS-ben. Belső árnyékok CSS-ben

Az oldal blokk elemének árnyékát általában háromdimenziós hatás létrehozására használják, és figyelmet fordítanak az elemre vagy a tervezés részeként. Egy kis árnyék az elemek alatt is megadja a hangerőt és a mélységét.

Az árnyék hozzáadásához, a négy értékű doboz-árnyék tulajdonsághoz, amelyből csak kettő kötelező. Ábrán. Az 1. ábra a doboz-árnyék tulajdonságot minden lehetséges értékkel mutatja be, számozott számozott azonosítani őket.

Ábra. 1. Box-árnyék tulajdonságértékek

1. az Inset kulcsszó beállítja az árnyékot az elem belsejében;
2. vízszintes árnyékváltás (5px - jobb, -5px - balra);
3. függőleges váltás (5px - le, -5px-up);
4. az árnyék sugara (0 éles árnyék);
5. Árnyék nyújtás (5px - stretching, -5px - tömörítés);
6. Árnyékszín.

Ügyeljen arra, hogy csak vízszintesen és függőleges változást adjon meg, az összes többi paramétert alapértelmezés szerint elfogadják. Ebben az esetben az árnyékot elmosódott és fekete nélkül vágják le.

A különböző paraméterek és értékeik kombinációi miatt sokféle árnyékot kaphat. A lapon. Az 1. ábra a kódot és az eredményt mutatja, amelyhez vezet.

Asztal. 1. Az árnyékparaméterek kombinálása

A kód	Eredmény	Leírás
box-Shadow: 5px 5px;		Éles árnyék jobbra és alul.
doboz-árnyék: -5px -5px;		Éles árnyék a bal oldalon és fölött.
doboz-árnyék: 0 0 5px;		Homályos árnyék az elem körül.
doboz-árnyék: 0 0 5px 2px;		A 2 képpont árnyékának bővítése.
doboz-árnyék: 0 0 5px 2px piros;		Piros ragyog az elem körül.
box-Shadow: 0.4em 0.4em 5px RGBA (122,122,122,0,5);		Áttetsző árnyék.
box-Shadow: Beépült 0 0 6px;		Árnyék belsejében.

Amint az a táblázatból látható, az árnyékváltás nem feltétlenül beállítható pixelben, bár kényelmes. A színe az árnyék megadható bármely hozzáférhető formában, így megszerzésének áttetsző árnyék, a RGBA formátum is megfelel, mint egy árnyék jól fog mutatni a háttértől. Az 1. példában bemutatjuk, hogyan kell csinálni.

1. példa A háttér rajzon árnyék

HTML5 CSS3 IE 9+ CR OP SA FX

A példa eredményét az 1. ábrán mutatjuk be. 2. Az árnyék megismétli a blokk sarkának kerekítését.

Ábra. 2. Az árnyék típusa a háttér rajzon

A "széles" árnyék hozzáadásával figyelembe kell venni, hogy meghaladhatja a látható böngészőablakot, és ezáltal a vízszintes görgetősáv megjelenéséhez vezet.

Az árnyék is hozzáadható a pszeudo-elemekhez is, néha összetett elrendezéshez szükséges. Ábrán. A 3. ábra egy olyan blokkot mutat, amelynek címe van, amelyhez az árnyékot hozzáadják. Annak érdekében, hogy a csomóponton nincsenek vonalak, pszeudo-elemet kell használni: utána, és adjunk hozzá egy árnyékot.

Ábra. 3. Blokk árnyékkal

A 2. példa egy ilyen blokk létrehozását mutatja.

2. példa Az árnyékkal blokkolja

HTML5 CSS3 IE 9+ CR OP SA FX

Az elem árnyéka nem lehet egyedül, de azonnal több, paramétereik a vesszőn keresztül szerepelnek a doboz-árnyék tulajdonság értékében. A 3. példa az összes képen kettős árnyék hozzáadását mutatja.

2. példa Az árnyékkal blokkolja

HTML5 CSS3 IE 9+ CR OP SA FX

A példa eredményét az 1. ábrán mutatjuk be. Négy.

Ábra. 4. kép dupla árnyékkal

Az első árnyék megjelenik a rajz bal oldalán, a 20px sugárral, mérete csökken a negyedik paraméter (-20px) miatt. A második árnyék paramétereit a vessző után jelzik, az árnyék az ábra jobb oldalán jelenik meg, és a szimmetria esetében is csökken.

A doboz-árnyék ingatlan hozzáad egy vagy több árnyékot. Az árnyék az elem egy példánya a megadott távolságra eltolódott. Az árnyékok külső vagy belső, homályos vagy lapo, követhetik a blokkok áramköröket kerekített sarkokkal. A Beettő kulcsszó használatával az árnyékok az elem belsejében hozhatók létre, így az elem vizuálisan térben vékony vagy depressziós.

Hogyan lehet a blokk árnyékát a doboz-árnyék tulajdonság segítségével

Támogató böngészők

AZAZ: 9.0
ÉL: 12.0
Firefox: 4.0, 3,5 -Moz-
Króm: 10.0, 4.0-webkit-
Szafari: 5.1, 3.1-webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1-webkit-
Android böngésző: 4.0, 2.1-webkit-

1. Szintaxis tulajdonságok doboz-árnyék

A doboz-árnyék tulajdonság egy vagy több árnyékot rögzít a blokkba. Az ingatlan sem fogadja el sem az értékét sem, amely jelzi az árnyékok hiányát, vagy az árnyékok listáját a vesszőn keresztül, elrendezve az elejétől a végéig.

Minden árnyék egy külön árnyék, amely 2-4 hossza, opcionális szín és opcionális kulcsszó beágyazódik. Megengedett hosszúságú 0; Az alapértelmezett színek megegyeznek a színes tulajdonság értékével.

Az ingatlan nem öröklődik.

Ábra. 1. Szintaxis tulajdonságok doboz-árnyék

Értékek:
x-offset.	Megadja az árnyék vízszintes elmozdulását. A pozitív érték egy árnyékot húz, amely a szöveg jobb oldalán eltolódott, a negatív hossz maradt.
y-offset.	Meghatározza az árnyék függőleges eltolódását. A pozitív érték eltolja az árnyékot, negatív.
elhomályosít	Meghatározza az elmosódott sugárat. A negatív értékek nem megengedettek. Ha az elmosódott érték nulla, az árnyék széle világos. Ellenkező esetben minél nagyobb az érték, annál nagyobb az árnyék széle homályos.
stretching	Meghatározza az árnyék növekedését. Pozitív értékek Az árnyék kiterjesztése minden irányba a megadott sugárhoz. A negatív értékek árnyék zsugorodnak. A belső árnyékok esetében az árnyékbővítés a kerület alakjának tömörítését jelenti.
szín	Meghatározza az árnyékokat. Ha a szín hiányzik, az alkalmazott szín a színes tulajdonságból származik. A szafari esetében az árnyék színét definiálják.
Inset.	Megváltoztatja a blokk eldobott árnyékát egy külső árnyékból a belső árnyékból.
egyik sem	Az alapértelmezett érték nem jelent árnyékot.
a kezdeti	Beállítja az alapértelmezett tulajdonság értékét.
örököl.	Örökli az ingatlan értékét a szülőelemtől.

Az árnyék hatásait a következőképpen alkalmazzák: az első árnyék tetején van, és a többi hátsó. Az árnyékok nem befolyásolják az elrendezést, és átfedhetnek más elemeket vagy árnyékaikat. A kontextusok és a rajzrendelés szempontjából az elem külső árnyékai közvetlenül az elem hátterében vannak rajzolva, és az elem belső árnyékai közvetlenül az elem háttere felett vannak (a határ és a határvonal alatt) Kép, ha van ilyen).

Ha az elemnek több doboza van, mindannyian árnyékokat kapnak, de az árnyékokat csak akkor húzzák meg, ha a határokat is rajzolják; Lásd: Box-dekoráció-szünet.

Az árnyékok nem okoznak görgetést, vagy nem növelik a tekercsterület méretét.

2. Példák a blokk árnyékára

2.1. Belső árnyék

.pelda-árnyék-1 (háttér: # E6E3DF; text-align: center;) .pelda-árnyék-1 span (margin: 50px; Magasság: 100px; width: 200px; Kijelző: inline-block; Box-Shadow: belső 2PX 2PX 5PX RGBA (154, 147, 140, 0,5), 1px 1px 5px RGBA (255, 255, 255, 1);)

2.2. Lapos árnyék az egyik oldalon

lakás

lakás

.example-árnyék-2 (háttér: bézs; text-align: center;) .example-árnyék-2 A (display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; szöveges -Decorage: nincs; margó: 20px; szín: fehér, fehér; háttér: háttérkép: doboz-árnyék: 0 5px 0 # 3C93d5; átmenet: .3s;) .mample-shadow-2 A: lebegése (háttér: # 6fc6ff) ;)

2.3. Árnyék az "anyagtervezés" stílusában

.pelda-árnyék-3 (háttér: # E8E8E8; text-align: center;) .pelda-árnyék-3 span (Háttér: Fehér; display: inline-block; width: 200px; Magasság: 100px; margin: 50px; doboz --Shadow: 0 14PX 28PX RGBA (0,0,0,0,25), 0 10px 10px RGBA (0,0,0,0,22);)

A hagyományos árnyékok könnyen megvalósítható doboz-árnyék vagy szöveges árnyék segítségével. De mi van, ha belső árnyékokat kell készítenie? Ez a cikk leírja, hogyan lehet ilyen árnyékokat csak néhány kódot használni.

Szintaxis

Először is, fontolja meg a két fő módját az árnyékok CSS-ben történő megvalósításához.

box-árnyék

Tervezés box-árnyék Több különböző értéket tartalmaz:

Vízszintes eltolás. és függőleges eltolás. - vízszintes és függőleges elmozdulás. Ezek az értékek azt mutatják, hogy az objektum eldobja az árnyékot:

Blur sugar. és spread sugarú. Egy kicsit nehezebb. Mi a különbség? Vessen egy pillantást két elemre, ahol az értékek blur sugar. Különböző:

Az árnyék szélén egyszerűen elmosódott. Különböző jelentésekkel spread sugarú. A következőket látjuk:

Ebben az esetben látjuk, hogy az árnyék szétszóródnak egy nagy területre. Ha nem adja meg az értékeket blur sugar. és spread sugarú., akkor 0-nak kell lennie.

szöveges árnyék.

A szintaxis nagyon hasonlít box-árnyék:

Az értékek hasonlóak, de nem terjedő árnyék.. Példa a használatra:

Beágyazás a doboz árnyékában

Ahhoz, hogy "fordítsa át az árnyékot az objektum belsejében, hozzá kell adnia inset. A CSS-ben:

Miután megértette a box-árnyék fő szintaxisát, megértse a belső árnyékok megvalósításának elvét nagyon egyszerű. Az értékek mindegyike ugyanaz, hozzáadhat színt (RGB a hexában):

Az RGB formátumban az alfa érték felelős az árnyék átláthatóságáért:

Képek árnyékokkal

Adjon hozzá egy belső árnyékot a képhez egy kicsit bonyolultabb, mint a szokásosnál div. Kezdjük, itt van a szokásos képkód:

Logikus, hogy feltételezzük, hogy hozzáadhatod az ilyen árnyékot:

IMG (doboz-árnyék: Beépített 0px 0px 10px RGBA (0,0,0,0,5);)

De az árnyék nem látható:

Számos módja van a probléma megoldására, amelyek mindegyike előnye és hátránya van. Tekintsük kettőt. Az első az, hogy a képet a szokásos módon csomagolja div:

Div (Magasság: 200px; szélesség: 400px; Box-árnyék: Inset 0px 0px 10px RGBA (0,0,0,0,0,9);) IMG (Magasság: 200px; szélesség: 400px; helyzet: a relatív; Z- index: -2;)

Minden működik, de hozzá kell adnod egy kis extra Markup HTML és CSS-t. A második mód az, hogy a képet a kívánt blokk hátterével állítsa be:

Div (magasság: 200px; width: 400px; background: url (http://lorempixum.com/400/200/transport/2) Box-Shadow: belső 0px 0px 10px RGBA (0,0,0,0,0 , 9);)

Ez történhet a belső árnyékok használatakor:

Be van ragasztva szöveges árnyékban

A szöveg belső árnyékának végrehajtása, a kód egyszerű kiegészítése inset. nem működik:

Megoldani, először alkalmazza a fejlécet h1. Telepítse a sötét háttér és a könnyű árnyék:

H1 (háttérszín: # 565656; szín: átlátszó, szöveg-árnyék: 0px 2px 3px RGBA (255,255,255,0,5);)

Ez az, ami kiderül:

Titkos összetevő hozzáadása háttér-klip.amely mindent levágott a szövegből (sötét háttéren):

H1 (háttérszín: # 565656; szín: átlátszó; szöveges árnyék: 0px 2px 3px RGBA (255,2555,255,0,5); webkit-background-Clip: szöveg; -Moz-background-Clip: szöveg; ;)

Kiderült, hogy szinte milyen szükséges. Most csak egy kis Darke a szöveg (Alpha) és az eredmény:

Ma megtudjuk, hogyan készítsünk CSS árnyékokat kép nélkül. A lecke tanulmányozása után már nem lesz szüksége CSS árnyékgenerátorra.

Mi a fő előnye a CSS3 segítségével létrehozott árnyékoknak, így ez egyszerűen megvalósítja és csökkenti a szerverre vonatkozó kérelmek számát (mivel már nem használjuk a képeket). Ahhoz, hogy az árnyékot a CSS-en végezzük, szükségünk lesz egy div és a CSS címke-ingatlan doboz-árnyék tulajdonságra. Nem lesz szükség további jelölésre, mert utoljára pszeudo elemeket fogunk tartani: utána és: előtte, amely a fő tárgyra kerül (DIV osztály blokk).

Vessen egy pillantást a HTML kódra, amelyre CSS3 árnyékot hozunk létre:

Ezután megtekintheti a megvalósításhoz szükséges kész példákat és kódot. Az oldalon található szöveg minimalizálása érdekében csökkentjük a CSS tulajdonságait a böngésző előtagokkal. A teljes kód látható a megfelelő "Példa" linkre kattintva.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF; Border-sugar: 4px; doboz-árnyék: 0 1PX 4PX RGBA (0, 0, 0, 0.3) 0 0 40 , 0, 0, 0.1) beágyazás;) .block: korábban, .block: után (tartalom: ""; pozíció: abszolút; z-index: -2; alsó: 15px; balra: 10px; szélesség: 50% : 20%; max-szélesség: 300px; doboz-árnyék: 0 15px 10px RGBA (0, 0, 0, 0.7); transzformáció: forgatás (-3deg);) .block: után (jobbra: 10px, balra: Auto; Átalakítás: forgatás (3deg);)

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Beágyazás; határ: 1px szilárd #efefef; határ-sugár: 0 0 120px 120px / 0 0 6px 6px;) .block: korábban, .block: után (tartalom: ""; pozíció: abszolút; z-index: -2; alsó: 12px; balra: 10px; szélesség: 50%; magasság: 55%; max-szélesség: 200 px; doboz-árnyék: 0 8px 12px RGBA (0, 0, 0, 0.5); transzformáció: Skew (-8deg) forgat (-3deg);) .block: után (jobb: 10px, bal: auto; transzformáció: ferde (8deg) forgatása (3deg);)

Az árnyék segítségével megadhatja a blokkot a perspektívára. A példa megtekintése.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) beágyazás;) .block: korábban, .block: után (tartalom: ""; pozíció: abszolút; z-index: -2;). Block: előtte (balra: 80px, alsó: 5px; 35%; max-szélesség: 200px; doboz-árnyék: -80px 0 8px RGBA (0, 0, 0, 0.4); Átalakítás: Skew (50deg); Átalakítás eredet: 0 100%;) : Egyik sem;)

CSS árnyék egy beállított blokkban. A példa megtekintése.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) Beágyazás; doboz-árnyék: 0 15px 10px -10px RGBA (0, 0, 0, 0.5), 0 1px 4px RGBA (0, 0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) inset ;) .block: korábban, .block: után (tartalom: ""; pozíció: abszolút; z-index: -2;)

Példa CSS3 árnyék egy függőlegesen hajlított blokkra. A példa megtekintése.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) beágyazás;) .block: korábban, .block: után (tartalom: "; pozíció: abszolút; z-index: -2;). Block: előtte (felső: 10px; jobb: 50% ; Doboz-árnyék: 0 0 15PX RGBA (0,0,0,0,6); határ-sugár: 10px / 100px;)

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) beágyazás;) .block: előtte, .block: után (tartalom: "; pozíció: abszolút; z-index: -2;) .block: előtte (felső: 10px; jobb: 10px; Doboz-árnyék: 0 0 15PX RGBA (0,0,0,0,0,6); határ-sugár: 10px / 100px;)

Példa CSS3 árnyék vízszintesen hajlított blokkra. A példa megtekintése.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) beágyazás;) .block: előtt, .block: után (tartalom: "; pozíció: abszolút; z-index: -2;) .block: korábban (felső: 50%, alsó: 0px; balra: 10px; jobb: 10px ; Doboz-árnyék: 0 15PX RGBA (0,0,0,0,6); határ-sugár: 100px / 10px;)

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1) beágyazás;) .block: előtt, .block: után (tartalom: ""; pozíció: abszolút; z-index: -2;) .block: korábban (felső: 0px; jobb: 10px ; Doboz-árnyék: 0 15PX RGBA (0,0,0,0,0,6); határ-sugár: 100px / 10px;)

CSS3 árnyék a forgatott blokkhoz. A példa megtekintése.

.block: 40%; Padding: 1em; margó: 2em 10px 4em; háttér: #FFF; Border-sugar: 4px; doboz-árnyék: 0 1PX 4PX RGBA (0, 0, 0, 0.3) 0 0 40PX RGBA (0 , 0, 0, 0.1) beágyazás; doboz-árnyék: nincs, átalakítás: forgatás: forgatás (-3deg);) .block\u003e: első gyermek: előtt (tartalom: "; pozíció: abszolút; z-index: -1; : 0px; alsó: 0; balra: balra: 0, jobb: 0px; háttér: #fiff, doboz-árnyék: 0 1px 4px RGBA (0, 0, 0, 0.3), 0 0 40px RGBA (0, 0, 0, 0.1 ) .Block: előtte, .block: után (tartalom: ", pozíció: abszolút; z-index: -2; alsó: 15px; balra: 10px; szélesség: max-szélesség; magasság: 20%; max : 300px; doboz-árnyék: 0 15PX 10px RGBA (0, 0, 0, 0.7); transzformáció: forgatható (-3deg);) .block: után (jobb: 10px, bal: auto; transzformáció: forgatás (3deg); )

A felvételi eljárás alapvetően fontos. Az első jelentés mindig az X tengely mentén, a második - az y tengely mentén.

Ha az egyik tengely nem igényel elmozdulást, tegye nullát:

Osztály (doboz-árnyék: 0 8px;) - Az árnyékot csak az y tengely mentén hajtsa végre

Eredmény

Osztály (doboz-árnyék: 8px 8px;) - Shift mindkét tengelyen

Eredmény

Negatív érték a doboz-árnyék tengelyekhez

Az árnyék az ellenkező irányba változik:

Osztály (doboz-árnyék: -8px 8px;) - az árnyékot negatív értékkel az X tengely mentén

Eredmény

Blur árnyék sugarája

Harmadik tulajdonságai Paraméter box-árnyék. Ha nincs megadva, az érték 0, és az árnyék mérete megegyezik az elem méretével.

Osztály (doboz-árnyék: 0 48px 0;) - Shadow Duplikálja az elem méretét

Eredmény

Ha az érték nagyobb, mint nulla, az élek elveszítik az egyértelműséget, az árnyék egyre inkább és vizuálisan könnyebbé válik. Blur minden oldalról szól:

Osztály (doboz-árnyék: 0 8px,) - offset nélkül, csak elmosódott

Eredmény

Osztály (doboz-árnyék: 0 8px 8px;) - az y tengely és elmosódás

Eredmény

A negatív érték hiba és árnyéknak tekinthető egyáltalán.

A nyújtó árnyék sugara

Negyedik ingatlanparaméter box-árnyék. Megváltoztatja az árnyék mennyiségét az elemhez képest. Szakaszok minden irányban:

Osztály (doboz-árnyék: 0 0 0 8px;) - elmozdulás és elmosódás nélkül, csak stretching

Eredmény

Ebben az esetben az árnyék nagyobb, mint az elem 16 pixel szélességben és magasságban: 8px a bal + 8px jobb oldali és 8px felett + 8px az alábbiakban.

Negatív érték a nyújtó árnyék CSS-ben

Az árnyék nem nyúlik ki, de az összes oldalról a megadott értékre szűkült:

Osztály (doboz-árnyék: 0 16px 0 -8px;) - A negatív érték árnyékának csökkentése

Eredmény

Színes árnyék

Alapértelmezés szerint az árnyékszín másolja a betűtípus színét: Mint a fenti példákban.

Az árnyék színét bármely rendelkezésre álló CSS \u200b\u200bformátumban tartalmazza:

• # Ff0009
• rGB (255, 0, 9)
• hSL (358, 100%, 50%);

Állítsa be az elemet a kék árnyékban:

Osztály (doboz-árnyék: 0 8px # 3a8fe7;)

Eredmény

Belső árnyék

Paraméter inset. Megjeleníti az árnyékot a blokk belsejében.

A fent felsorolt \u200b\u200bparaméterekkel ellentétben nincs merev szó. Mindkét lehetőség egy eredményt ad:

Doboz-árnyék: 0 8px # 3a8fe7 insece; Box-Shadow: Beépítés 0 8px # 3A8FE7;

Eredmény

A második lehetőség kényelmesebb az észleléshez, amikor elolvassa a kódolást.

Több árnyék

Számos árnyék kerül a vesszőn keresztül. Az eljárás felülről lefelé:

Osztály (doboz-árnyék: 0 8px # 3a8fe7, 0 16px # 3ae7af;)

Eredmény

Ha megváltoztatja a helyeket, a kék árnyék nem lesz látható:

Osztály (doboz-árnyék: 0 16px # 3ae7af, 0 8px # 3a8fe7;)

Eredmény

Ugyanakkor egy belső és külső árnyékot adnak:

Osztály (doboz-árnyék: 0 16px # 3AE7AF, beágyazva 0 8px # 3a8fe7;)

Eredmény

Árnyék kerek sarkokkal

Ha az elem beállítja az ingatlant határi sugár., Az árnyék lekerekített sarkokkal lesz.

Osztály (doboz-árnyék: 0 16px # 3a8fe7; határ-sugár: 8px;)

Eredmény

Az árnyék nyújtásának beállítása, növekedünk és kerekítése. Például, a Border-Radius 8px, és az árnyék nyújtása - 4.

8 + 4 \u003d 12px az árnyék sugara.

Osztály (doboz-árnyék: 0 16px 0 4px # 3A8FE7; határ-sugár: 8px;)

Eredmény

Ugyanez az elv az árnyék tömörítésére vonatkozik, ha az érték negatív.

8 + (- 4) \u003d 4px - kétszer kevesebb kerek árnyékot kapunk.

Ha az árnyék tömörítése nagyobb, mint a határ sugara, kapjon árnyékot egyenes sarkokkal. Például 16px tömörítés.

8 + (- 16) \u003d (- 8), de a kerekítés nem lehet negatív érték és nulla alkalmazható.

Osztály (doboz-árnyék: 0 24px 0 -16px # 3A8FE7; határ sugara: 8px;)

Eredmény

CSS tulajdonság box-árnyék Az Opera Mini kivételével minden népszerű böngésző támogatja.