A CSS box-shadow használata: 13 trükk és példa

A CSS box-shadow használata: 13 trükk és példa

A CSS az a nyelv, amelyet a fejlesztők használnak a weblapok stílusához. Azt szabályozza, hogy a HTML elemek hogyan jelenjenek meg a képernyőn, papíron vagy bármilyen más médiában. A CSS teljes testreszabási lehetőséget biztosít a weblap saját képére való stílusához.





A CSS használatával megváltoztathatja az elemek háttérszínét, betűtípusát, betűszínét, dobozárnyékát, margóját és számos egyéb tulajdonságát. Ebben az útmutatóban bemutatjuk a box-árnyék hatékony felhasználási módjait.



Mi az a CSS box-shadow?

Az doboz-árnyék tulajdonság árnyék alkalmazására szolgál a HTML elemekre. Ez az egyik leggyakrabban használt CSS tulajdonság a dobozok vagy képek formázásához.





CSS szintaxis:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. vízszintes eltolás: Ha a vízszintes eltolás pozitív, az árnyék a doboz jobb oldalán lesz. És ha a vízszintes eltolás negatív, az árnyék a doboz bal oldalán lesz.
  2. függőleges eltolás: Ha a függőleges eltolás pozitív, az árnyék a doboz alatt lesz. És ha a függőleges eltolás negatív, az árnyék a doboz felett lesz.
  3. homály sugara: Minél magasabb az érték, annál homályosabb lesz az árnyék.
  4. elterjedési sugár: Azt jelzi, hogy mennyire kell terjednie az árnyéknak. A pozitív értékek növelik az árnyék terjedését, a negatív értékek csökkentik a szórást.
  5. Szín: Az árnyék színét jelöli. Ezenkívül bármilyen színformátumot támogat, például az rgba, a hex vagy a hsla.

Az elmosódás, a szórás és a színparaméterek opcionálisak. A box-shadow legérdekesebb része az, hogy vesszővel tetszőleges számú alkalommal elválaszthatja a box-shadow értékeket. Ezzel több szegélyt és árnyékot hozhat létre az elemeken.



1. Adjon hozzá egy halvány doboz-árnyékot a doboz bal, jobb és alsó részéhez

Nagyon halvány árnyékokat adhat a doboz három oldalához (balra, jobbra és alulra) a következő box-shadow CSS használatával a cél HTML elemmel:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Kimenet:



2. Adjon hozzá egy Halvány mező-árnyékot a Minden oldalhoz

Világos árnyékokat adhat a doboz minden oldalához a következő box-shadow CSS használatával a cél HTML elemmel:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Kimenet:

3. Adjon hozzá egy vékony doboz-árnyékot az alsó és a jobb oldalhoz

A doboz alsó és jobb oldalához árnyékokat adhat a következő box-shadow CSS használatával a cél HTML elemmel:

Hogyan lehet visszatéríteni a játékokat PS4 -en
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Kimenet:

4. Adjon hozzá egy sötét doboz-árnyékot a Minden oldalhoz

Sötét árnyékot adhat a doboz minden oldalához a következő box-shadow CSS használatával a cél HTML elemmel:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Kimenet:

5. Add Spread Shadow -t minden oldalra

Hozzáadhat szórt árnyékot a doboz minden oldalához a következő paranccsal a cél HTML elemmel:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Kimenet:

6. Adjon hozzá egy vékony szegélyárnyékot minden oldalhoz

Egy egyszerű szegélyárnyékot adhat a doboz minden oldalához a következő CSS használatával a cél HTML elemmel:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Kimenet:

7. Adjon hozzá egy árnyékolást az alsó és a bal oldalhoz

Hozzáadhat árnyékot a doboz alsó és bal oldalához a következő box-shadow CSS használatával a cél HTML elemmel:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Kimenet:

8. Adjon hozzá egy halvány doboz-árnyékot a felső és bal oldalhoz, sötét árnyékot az alsó és jobb oldalhoz

Világos árnyékot adhat a doboz tetejéhez és bal oldalához, valamint sötét árnyékot a doboz alsó és jobb oldalához a következő CSS használatával a cél HTML -elemmel:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Kimenet:

9. Vékony, színes szegélyárnyékot adjon minden oldalhoz

Egy egyszerű színes szegélyárnyékot adhat a doboz minden oldalához a következő box-shadow CSS használatával a cél HTML elemmel:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Kimenet:

10. Adjon hozzá több színes szegélyárnyékot a doboz alsó és bal oldalához

Több színes szegélyárnyékot adhat a doboz alsó és bal oldalához a következő CSS használatával a cél HTML elemmel:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Kimenet:

hogyan lehet megnyitni egy jar fájlt a Windows 10 rendszerben

11. Adjon hozzá több színes szegélyárnyékot az aljához

Több színes szegélyárnyékot adhat a doboz aljához a következő box-shadow CSS használatával a cél HTML elemmel:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Kimenet:

12. Adjon hozzá több színes szegélyárnyékot a doboz alsó és jobb oldalához

Több színes szegélyárnyékot adhat a doboz alsó és jobb oldalához a következő CSS használatával a cél HTML elemmel:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Kimenet:

13. Adjon világos árnyékokat a bal és jobb oldalhoz, terítse el az árnyékot az aljára

Világos árnyékokat adhat a bal és a jobb oldalhoz, és az árnyékot a doboz aljára terítheti a következő mező-árnyék CSS használatával a cél HTML-elemmel:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Kimenet:

Integrálja a CSS -t egy HTML -oldallal

Most már tudja, hogyan adhat hozzá hűvös doboz-árnyék hatásokat a CSS használatával, és könnyen integrálhatja őket HTML-elemekkel többféle módon.

Összefüggő: 11 Hasznos eszközök a CSS fájlok ellenőrzéséhez, tisztításához és optimalizálásához

Beágyazhatja magát a HTML -oldalba, vagy külön dokumentumként csatolhatja. A CSS -t háromféleképpen lehet HTML -dokumentumba foglalni:

Belső CSS

A beágyazott vagy belső stíluslapok be vannak helyezve a egy HTML dokumentum szakaszában a elem. Bármilyen számot létrehozhat elemeket egy HTML dokumentumban, de azokat a és címkék. Íme egy példa, amely bemutatja, hogyan kell használni a belső CSS -t egy HTML -dokumentummal:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





Soros CSS

A soros CSS -t egyedi stílusszabályok hozzáadására használják egy HTML -elemhez. HTML elemmel használható a stílus tulajdonság. A style attribútum CSS tulajdonságokat tartalmaz 'ingatlan érték' pontosvesszővel elválasztva ( ; ).

Kapcsolódó: Ismerje meg, hogyan lehet kétdimenziós webhelyeket készíteni CSS-rács segítségével

Az összes CSS tulajdonságnak egy sorban kell lennie, azaz nem lehet sortörés a CSS tulajdonságok között. Íme egy példa, amely bemutatja, hogyan használható a soros CSS egy HTML -dokumentummal:





CSS box-shadow



Style 4





Külső CSS

A külső CSS a legideálisabb módja a stílusok HTML -dokumentumokra történő alkalmazásának. Egy külső stíluslap tartalmazza az összes stílusszabályt egy külön dokumentumban (.css fájl), ez a dokumentum ezután a HTML dokumentumhoz kapcsolódik a címke. Ez a módszer a legjobb módszer a stílusok meghatározására és alkalmazására a HTML dokumentumokon, mivel az érintett HTML fájl minimális változtatásokat igényel a jelölésben. Íme egy példa, amely bemutatja a külső CSS használatát HTML dokumentumokkal:

Hozzon létre egy új CSS -fájlt a .css kiterjesztés. Most adja hozzá a következő CSS kódot a fájlba:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Végül hozzon létre egy HTML dokumentumot, és adja hozzá a következő kódot a dokumentumba:

hol van a zseblámpám ezen a telefonon




CSS box-shadow




Style 4





Vegye figyelembe, hogy a CSS -fájl a HTML -dokumentumon keresztül kapcsolódik címke és href tulajdonság.

A fenti három módszer (belső CSS, soros CSS és külső CSS) ugyanazt a kimenetet jeleníti meg-

Tegye elegánsá weboldalát a CSS segítségével

A CSS használatával teljes mértékben szabályozhatja weboldalának stílusát. Minden HTML -elemet testreszabhat különféle CSS -tulajdonságokkal. A világ minden tájáról érkező fejlesztők hozzájárulnak a CSS frissítéséhez, és ezt teszik 1996 -os megjelenése óta. Így a kezdőknek sokat kell tanulniuk!

Szerencsére a CSS kezdőbarát. Kiváló gyakorlatokat szerezhet, ha néhány egyszerű paranccsal kezdi, és megnézi, hová viszi kreativitása.

Részvény Részvény Csipog Email 10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

Segítségre van szüksége CSS munkájában? Először is próbálja ki ezeket az alapvető CSS -kódpéldákat, majd alkalmazza őket saját weboldalain.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • Web Design
  • CSS
A szerzőről Yuvraj Chandra(60 cikk megjelent)

Yuvraj egy számítástechnikai egyetemi hallgató a Delhi Egyetemen, Indiában. Szenvedélyesen foglalkozik a Full Stack webfejlesztéssel. Amikor nem ír, a különböző technológiák mélységét kutatja.

Bővebben: Yuvraj Chandra

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide