Hur man använder CSS box-shadow: 13 knep och exempel

Hur man använder CSS box-shadow: 13 knep och exempel

CSS är det språk som utvecklare använder för att utforma en webbsida. Den styr hur HTML -element visas på en skärm, på papper eller i någon annan form av media. CSS ger full anpassningskraft för att utforma webbsidan i din egen bild.





Du kan ändra ett elements bakgrundsfärg, teckensnittsstil, teckensnittsfärg, boxskugga, marginal och många andra egenskaper med hjälp av CSS. Vi kommer att gå igenom några effektiva användningsområden för box-shadow i den här guiden.



Vad är CSS box-shadow?

De box-skugga egenskap används för att tillämpa en skugga på HTML -element. Det är en av de mest använda CSS -egenskaperna för styling av lådor eller bilder.





CSS -syntax:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. horisontell förskjutning: Om den horisontella förskjutningen är positiv kommer skuggan att ligga till höger om rutan. Och om den horisontella förskjutningen är negativ, kommer skuggan till vänster om rutan.
  2. vertikal förskjutning: Om den vertikala förskjutningen är positiv kommer skuggan att ligga under rutan. Och om den vertikala förskjutningen är negativ kommer skuggan att ligga ovanför rutan.
  3. oskärpa radie: Ju högre värde, desto mer suddig blir skuggan.
  4. spridningsradie: Det betyder hur mycket skuggan ska sprida sig. Positiva värden ökar spridningen av skuggan, negativa värden minskar spridningen.
  5. Färg: Det betyder skuggans färg. Det stöder också alla färgformat som rgba, hex eller hsla.

Oskärpa, spridning och färgparametrar är valfria. Den mest intressanta delen av box-shadow är att du kan använda ett kommatecken för att separera box-shadow-värden hur många gånger som helst. Detta kan användas för att skapa flera gränser och skuggor på elementen.



1. Lägg till en dim box-skugga till vänster, höger och botten av rutan

Du kan lägga till mycket svaga skuggor på tre sidor (vänster, höger och botten) av rutan med hjälp av följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:



2. Lägg till en dim-box-skugga på alla sidor

Du kan lägga till ljusa skuggor på alla sidor av rutan med hjälp av följande box-shadow CSS med ditt mål-HTML-element:



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

Produktion:

3. Lägg till en tunn box-skugga på undersidan och höger sida

Du kan lägga till skuggor längst ned och till höger i rutan med hjälp av följande box-shadow CSS med ditt mål-HTML-element:

hur man ss på snap utan att de vet 2021
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Produktion:

4. Lägg till en mörk lådskugga på alla sidor

Du kan lägga till mörk skugga på alla sidor av rutan med hjälp av följande box-shadow CSS med ditt HTML-element:

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

Produktion:

5. Lägg till Spread Shadow på alla sidor

Du kan lägga till spridningsskugga på alla sidor av rutan med följande kommando med ditt 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. Lägg till en tunn kantskugga på alla sidor

Du kan lägga till en enkel kantskugga på alla sidor av rutan med hjälp av följande CSS med ditt 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. Lägg till en rutskugga på undersidan och vänster sida

Du kan lägga till en skugga till den nedre och vänstra sidan av rutan med hjälp av följande box-shadow CSS med ditt HTML-element:

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

Produktion:

8. Lägg till en dim-box-skugga på övre och vänstra sidorna, mörk skugga till botten och höger

Du kan lägga till en ljus skugga på rutans övre och vänstra sida samt en mörk skugga till rutans botten och höger med hjälp av följande CSS med ditt 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. Lägg till en tunn, färgad kantskugga på alla sidor

Du kan lägga till en enkel färgad kantskugga på alla sidor av rutan med hjälp av följande box-shadow CSS med ditt mål-HTML-element:

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

Produktion:

10. Lägg till flera färgade kantskuggor på rutans nedre och vänstra sida

Du kan lägga till flera färgade kantskuggor till rutans botten och vänstra sida med hjälp av följande CSS med ditt 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:

hårddisk som körs med 100 procent windows 10

11. Lägg till flera färgade kantskuggor längst ner

Du kan lägga till flera färgade kantskuggor längst ner i rutan med hjälp av följande box-shadow CSS med ditt 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. Lägg till flera färgade kantskuggor på rutans nedre och högra sida

Du kan lägga till flera färgade kantskuggor längst ner och till höger i rutan med hjälp av följande CSS med ditt 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. Lägg till ljusa skuggor på vänster och höger sida, sprid skugga till botten

Du kan lägga till ljusa skuggor till vänster och höger sida och sprida skugga till botten av rutan med hjälp av följande box-shadow CSS med ditt 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:

Integrera CSS med en HTML -sida

Nu vet du hur du lägger till coola box-skuggaeffekter med CSS, du kan enkelt integrera dem med HTML-element på flera sätt.

Relaterad: 11 Användbara verktyg för att kontrollera, rengöra och optimera CSS -filer

Du kan bädda in den på själva HTML -sidan eller bifoga den som ett separat dokument. Det finns tre sätt att inkludera CSS i ett HTML -dokument:

Intern CSS

Inbäddade eller interna formatmallar infogas i i ett HTML -dokument med element. Du kan skapa valfritt antal element i ett HTML -dokument, men de måste bifogas mellan och taggar. Här är ett exempel som visar hur du använder Intern CSS med ett 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 används för att lägga till unika stilregler till ett HTML -element. Den kan användas med ett HTML -element via stil attribut. Stilattributet innehåller CSS -egenskaper i form av 'fastighetsvärde' åtskilt med ett semikolon ( ; ).

Relaterat: Lär dig hur du bygger tvådimensionella webbplatser med CSS-rutnät

Alla CSS -egenskaper måste vara på en rad, dvs det ska inte finnas några radbrytningar mellan CSS -egenskaperna. Här är ett exempel som visar hur du använder inline CSS med ett HTML -dokument:





CSS box-shadow



Style 4





Extern CSS

Extern CSS är det mest idealiska sättet att tillämpa stilar på HTML -dokument. Ett externt formatmall innehåller alla stilregler i ett separat dokument (.css -fil), detta dokument länkas sedan till HTML -dokumentet med hjälp av märka. Denna metod är den bästa metoden för att definiera och tillämpa stilar på HTML -dokumenten eftersom den berörda HTML -filen kräver minimala ändringar i markeringen. Här är ett exempel som visar hur man använder extern CSS med ett HTML -dokument:

Skapa en ny CSS -fil med .css förlängning. Lägg nu till följande CSS -kod i den filen:

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

Slutligen, skapa ett HTML -dokument och lägg till följande kod i det dokumentet:

hitta domänen och intervallet för en funktionskalkylator




CSS box-shadow




Style 4





Observera att CSS -filen är länkad till HTML -dokumentet via tagga och href attribut.

Alla ovanstående tre metoder (Intern CSS, Inline CSS och Extern CSS) kommer att visa samma output-

Gör din webbsida elegant med CSS

Genom att använda CSS har du full kontroll över utformningen av din webbsida. Du kan anpassa varje HTML -element med olika CSS -egenskaper. Dev från hela världen bidrar till CSS -uppdateringar, och de har gjort det sedan det släpptes 1996. Som sådan har nybörjare mycket att lära!

Lyckligtvis är CSS nybörjarvänligt. Du kan få bra övningar genom att börja med några enkla kommandon och se vart din kreativitet tar dig.

Dela med sig Dela med sig Tweet E-post 10 enkla CSS -kodexempel du kan lära dig på 10 minuter

Behöver du hjälp med CSS? Prova dessa grundläggande CSS -kodexempel till att börja med och applicera dem sedan på dina egna webbsidor.

Läs Nästa Relaterade ämnen
  • Programmering
  • Webbdesign
  • CSS
Om författaren Yuvraj Chandra(60 artiklar publicerade)

Yuvraj är en datavetenskaplig grundstudent vid University of Delhi, Indien. Han brinner för Full Stack webbutveckling. När han inte skriver utforskar han djupet i olika tekniker.

Mer från Yuvraj Chandra

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera