Sådan bruges CSS box-shadow: 13 tricks og eksempler

Sådan bruges CSS box-shadow: 13 tricks og eksempler

CSS er det sprog, udviklere bruger til at style en webside. Det styrer, hvordan HTML -elementer vises på en skærm, på papir eller i enhver anden form for medier. CSS giver den fulde tilpasningskraft til at style websiden i dit eget billede.





Du kan ændre et elements baggrundsfarve, skrifttypestil, skrifttypefarve, bokseskygge, margen og mange andre egenskaber ved hjælp af CSS. Vi vil guide dig gennem nogle effektive anvendelser af box-shadow i denne guide.



Hvad er CSS box-shadow?

Det kasse-skygge egenskab bruges til at anvende en skygge på HTML -elementer. Det er en af ​​de mest brugte CSS -egenskaber til styling af kasser eller billeder.





CSS -syntaks:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. vandret forskydning: Hvis den vandrette forskydning er positiv, vil skyggen være til højre for boksen. Og hvis den vandrette forskydning er negativ, vil skyggen være til venstre for boksen.
  2. lodret forskydning: Hvis den lodrette forskydning er positiv, vil skyggen være under boksen. Og hvis den lodrette forskydning er negativ, vil skyggen være over boksen.
  3. sløring radius: Jo højere værdi, jo mere sløret bliver skyggen.
  4. spredningsradius: Det angiver, hvor meget skyggen skal sprede sig. Positive værdier øger spredningen af ​​skyggen, negative værdier reducerer spredningen.
  5. Farve: Det angiver farven på skyggen. Det understøtter også ethvert farveformat som rgba, hex eller hsla.

Sløring, spredning og farveparametre er valgfri. Den mest interessante del af box-shadow er, at du kan bruge et komma til at adskille box-shadow værdier et hvilket som helst antal gange. Dette kan bruges til at oprette flere kanter og skygger på elementerne.



1. Tilføj en dæmpet bokseskygge til venstre, højre og bunden af ​​boksen

Du kan tilføje meget svage skygger til tre sider (venstre, højre og bund) af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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

Produktion:



2. Tilføj en dim-box-skygge til alle sider

Du kan tilføje lysskygger til alle sider af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:



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

Produktion:

3. Tilføj en tynd bokseskygge til bunden og højre side

Du kan tilføje skygger til bunden og højre side af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

hvorfor bliver min computer ved med at miste internetforbindelse
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Produktion:

4. Tilføj en mørk boksskygge til alle sider

Du kan tilføje mørk skygge til alle sider af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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

Produktion:

5. Tilføj Spread Shadow til alle sider

Du kan tilføje spredt skygge til alle sider af boksen ved hjælp af følgende kommando med dit HTML -element:

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;

Produktion:

6. Tilføj en tynd kantskygge til alle sider

Du kan tilføje en simpel kantskygge til alle sider af boksen ved hjælp af følgende CSS med dit HTML -element:

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;

Produktion:

7. Tilføj en kasse-skygge til bunden og venstre side

Du kan tilføje en skygge til bunden og venstre side af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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

Produktion:

8. Tilføj en dæmpet bokseskygge til oversiderne øverst og venstre, mørk skygge til bunden og højre side

Du kan tilføje en lys skygge til toppen og venstre side af boksen samt en mørk skygge til bunden og højre side af boksen ved hjælp af følgende CSS med dit mål -HTML -element:

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

Produktion:

9. Tilføj en tynd, farvet kantskygge til alle sider

Du kan tilføje en simpel farvet kantskygge til alle sider af boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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

Produktion:

10. Tilføj flere farvede kantskygger til boksens nederste og venstre side

Du kan tilføje flere farvede kantskygger til bunden og venstre side af boksen ved hjælp af følgende CSS med dit mål -HTML -element:

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

Produktion:

design din egen tatovering gratis online nu

11. Tilføj flere farvede kantskygger til bunden

Du kan tilføje flere farvede kantskygger til bunden af ​​boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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;

Produktion:

12. Tilføj flere farvede kantskygger til boksens nederste og højre side

Du kan tilføje flere farvede kantskygger til bunden og højre side af boksen ved hjælp af følgende CSS med dit mål -HTML -element:

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;

Produktion:

13. Tilføj lette skygger til venstre og højre side, spred skyggen til bunden

Du kan tilføje lette skygger til venstre og højre side og sprede skygge til bunden af ​​boksen ved hjælp af følgende box-shadow CSS med dit mål-HTML-element:

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;

Produktion:

Integrer CSS med en HTML -side

Nu ved du, hvordan du tilføjer cool box-shadow-effekter ved hjælp af CSS, du kan nemt integrere dem med HTML-elementer på flere måder.

Relaterede: 11 Nyttige værktøjer til at kontrollere, rense og optimere CSS -filer

Du kan integrere den i selve HTML -siden eller vedhæfte den som et separat dokument. Der er tre måder at inkludere CSS i et HTML -dokument:

Intern CSS

Embedded eller Intern Style Sheets indsættes i sektion af et HTML -dokument ved hjælp af element. Du kan oprette et vilkårligt antal elementer i et HTML -dokument, men de skal være vedlagt mellem og mærker. Her er et eksempel, der viser, hvordan du bruger intern CSS med et HTML -dokument:





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





Inline CSS

Inline CSS bruges til at tilføje unikke stilregler til et HTML -element. Det kan bruges med et HTML -element via stil attribut. Styleattributten indeholder CSS -egenskaber i form af 'ejendom: værdi' adskilt af et semikolon ( ; ).

Relateret: Lær at bygge todimensionale websteder med CSS-gitter

Alle CSS -egenskaber skal være i en linje, dvs. der må ikke være linjeskift mellem CSS -egenskaberne. Her er et eksempel, der viser, hvordan du bruger inline CSS med et HTML -dokument:





CSS box-shadow



Style 4





Ekstern CSS

Ekstern CSS er den mest ideelle måde at anvende typografier på HTML -dokumenter. Et eksternt typografiark indeholder alle typografireglerne i et separat dokument (.css -fil), dette dokument bliver derefter knyttet til HTML -dokumentet ved hjælp af tag. Denne metode er den bedste metode til at definere og anvende typografier på HTML -dokumenterne, da den berørte HTML -fil kræver minimale ændringer i markeringen. Her er et eksempel, der viser, hvordan du bruger ekstern CSS med et HTML -dokument:

Opret en ny CSS -fil med .css udvidelse. Tilføj nu følgende CSS -kode inde i den fil:

.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;
}

Til sidst skal du oprette et HTML -dokument og tilføje følgende kode inde i det dokument:

hvordan man indsætter en linje i word 2016




CSS box-shadow




Style 4





Bemærk, at CSS -filen er knyttet til HTML -dokumentet via tag og href attribut.

Alle de tre ovennævnte metoder (Intern CSS, Inline CSS og External CSS) viser samme output-

Gør din webside elegant med CSS

Ved at bruge CSS har du fuld kontrol over stylingen af ​​din webside. Du kan tilpasse hvert HTML -element ved hjælp af forskellige CSS -egenskaber. Devs fra hele verden bidrager til CSS -opdateringer, og det har de gjort siden udgivelsen i 1996. Som sådan har begyndere meget at lære!

Heldigvis er CSS nybegyndervenligt. Du kan få en god øvelse ved at starte med et par enkle kommandoer og se, hvor din kreativitet tager dig.

Del Del Tweet E -mail 10 simple CSS -kodeeksempler, du kan lære på 10 minutter

Brug for hjælp til CSS? Prøv disse grundlæggende CSS -kodeeksempler til at starte med, og anvend dem derefter på dine egne websider.

Læs Næste Relaterede emner
  • Programmering
  • Webdesign
  • CSS
Om forfatteren Yuvraj Chandra(60 artikler udgivet)

Yuvraj er en datalogi bachelorstuderende ved University of Delhi, Indien. Han brænder for Full Stack Web Development. Når han ikke skriver, undersøger han dybden af ​​forskellige teknologier.

Mere fra Yuvraj Chandra

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere