CSS Box Shadow
CSS box-shadow Eiendom
Die CSS- box-shadow
eienskap word gebruik om een of meer skaduwees op 'n element toe te pas.
Spesifiseer 'n horisontale en 'n vertikale skaduwee
In sy eenvoudigste gebruik spesifiseer jy net 'n horisontale en 'n vertikale skaduwee. Die verstekkleur van die skaduwee is die huidige tekskleur.
Voorbeeld
Spesifiseer 'n horisontale en 'n vertikale skaduwee:
div
{
box-shadow: 10px 10px;
}
Spesifiseer 'n kleur vir die skaduwee
Die color
parameter definieer die kleur van die skaduwee.
Voorbeeld
Spesifiseer 'n kleur vir die skaduwee:
div
{
box-shadow: 10px 10px grey;
}
Voeg 'n vervaag-effek by die skaduwee
Die blur
parameter definieer die vervaag radius. Hoe hoër die getal, hoe meer vaag sal die skaduwee wees.
Voorbeeld
Voeg 'n vervaag effek by die skadu:
div
{
box-shadow: 10px 10px 5px grey;
}
Stel die verspreidingsradius van die skaduwee
Die spread
parameter definieer die verspreidingsradius. 'n Positiewe waarde verhoog die grootte van die skaduwee, 'n negatiewe waarde verminder die grootte van die skaduwee.
Voorbeeld
Stel die verspreidingsradius van die skaduwee:
div
{
box-shadow: 10px 10px 5px 12px grey;
}
Stel die ingevoegde parameter
Die inset
parameter verander die skaduwee van 'n buitenste skaduwee (begin) na 'n binneskaduwee.
Voorbeeld
Voeg die insetparameter by:
div
{
box-shadow: 10px 10px 5px grey inset;
}
Voeg veelvuldige skaduwees by
'n Element kan ook veelvuldige skaduwees hê:
Voorbeeld
div
{
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
Kaarte
Jy kan ook die box-shadow
eiendom gebruik om papieragtige kaarte te skep:
1
1 Januarie 2021
Hardanger, Noorweë
Voorbeeld
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |