Slagskyggen er en effekt, der falder eller tilføjer en skygge bag de valgte HTML-elementer, når de gengives på websiden. Denne effekt kan opnås ved at bruge ' drop-shadow() ' metode som værdi for CSS ' filter ' ejendom eller ved at bruge ' kasse-skygge ” ejendom. Ved at bruge egenskaben 'box-shadow' kan den visuelle forbedring, brugeroplevelsen, vægtningen og fokus henledes til et specifikt målrettet HTML-element.
Denne vejledning demonstrerer proceduren til at lave en drop shadow-effekt ved hjælp af box-shadow-egenskaben:
-
- Lav en solid drop Shadow ved hjælp af box-shadow-egenskab
- Lav en sløret slagskygge ved hjælp af box-shadow-egenskab
- Udvid Drop Shadow-området
Hvordan laver man Drop Shadows i CSS3 ved hjælp af box-shadow-egenskaben?
Det ' kasse-skygge ” egenskaben giver udvikleren mulighed for at etablere et visuelt hierarki ved at angive den relative placering af elementer på siden. Ved at bruge det kan websideskabere skabe en illusion af objekter, der kaster skygger på overflader, hvilket giver elementer en mere interaktiv følelse.
Syntaks
Egenskaben 'box-shadow' har en syntaks på:
box-shadow: [ vandret offset ] [ lodret offset ] [ sløringsradius ] [ spredningsradius ] [ farve ] ;
En forklaring af termer brugt i ovenstående syntaks:
-
- I første omgang var ' vandret offset ” henter/gemmer X-aksepositionen, og negativ ” værdi sætter skyggen til venstre og omvendt.
- Det ' lodret offset '-værdien gemmer Y-aksens position, ' positiv ”-værdi sætter skyggen i nedadgående retning og omvendt i tilfælde af ” negativ 'værdi.
- Dernæst ' sløringsradius ” værdi fra navnet angiver skyggens slørhed.
- Det ' spredningsradius ” værdi angiver, hvor meget radius skyggen skal udvides.
- Det ' farve ' indstiller skyggefarven, den kan være i ' HSL ' eller ' RGB format også.
Lad os nu gennemgå et par eksempler for en bedre forståelse:
Eksempel 1: Påfør Solid Drop Shadow ved hjælp af box-shadow Property
For at indstille den solide skygge er kun retningerne og skyggefarven indsat som en værdi til ' kasse-skygge ” ejendom:
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px massiv majssilke;
højde: 210px;
baggrundsfarve: #f0f0f0;
box-shadow: 10px 10px forestgreen;
}
stil >
I ovenstående kode:
-
- Først vælges HTML-elementet med en klasse på ' boxShadowExample ”. Og værdien af ' 210px ” gives til ” højde ' og ' bredde ' ejendomme. Brug også ' grænse ' og ' baggrundsfarve ” egenskaber for bedre visualisering.
- Indstil derefter værdien af ' 10px 10px skovgrøn ' til ' kasse-skygge ” CSS ejendom. Det ' 10px ” er den vandrette og lodrette forskydning, der bestemmer det sted, hvor skyggen skal påføres. Og ' skovgrøn ” er farven på skyggen.
Efter kompileringen ser websiden sådan ud:
Outputtet bekræfter, at en skygge af solid type er blevet placeret ved hjælp af egenskaben box-shadow.
Eksempel 2: Anvend sløret slagskygge ved hjælp af box-shadow-egenskab
For at gøre den allerede påførte skygge sløret, indsættes endnu en numerisk værdi før farven for ' kasse-skygge ” ejendom. Besøg nedenstående opdaterede kode:
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px massiv majssilke;
højde: 210px;
baggrundsfarve: hvid røg;
box-shadow: 10px 10px 15px forestgreen;
}
stil >
Ifølge ovenstående kode er skyggen nu ' 15 px ” sløret. Efter afslutningen af kompileringsfasen ser websiden sådan ud:
Ovenstående figur viser, at skyggen nu er sløret.
Eksempel 3: Udvidelse af skyggeområdet
Spredningsværdien angives til ' kasse-skygge ” egenskab til at udvide området af skyggen. Værdien af spredningen skal være i numerisk format. Ligesom i nedenstående kodestykke udvides skyggeområdet til ' 20 px ”:
< stil >.boxShadowExample {
bredde: 210px;
kant: 2px massiv majssilke;
højde: 210px;
baggrundsfarve: hvid røg;
box-shadow: 10px 10px 15px 20px skovgrøn;
}
stil >
Efter udførelsen ser skyggen nu sådan ud:
Som du kan se, er skyggens område nu øget med 20px.
Konklusion
Det ' kasse-skygge ” ejendom bruges til at skabe en ” skygge ” effekt på udvalgte HTML-elementer. Det ' skygge ' ejendom accepterer fem værdier, ' vandret offset ', ' lodret offset ', ' sløringsradius ', ' spredningsradius ' og ' farve '. Værdierne for 'horisontal forskydning' og 'lodret forskydning' angiver dimensionerne for skyggen, hvorfra skyggen skal komme frem. Værdien for 'sløringsradius' gør skyggen sløret, og værdien 'spredningsradius' udvider skyggens område.