HTML5 - Doosschaduw

Dit is een van de meest verwachte kenmerken van de nieuwe standaard van CSS3 en dat in combinatie met HTML5 weet veel blikken te trekken, verwijzen we naar de Doos Schaduw wie staat ons toe om schaduwen op de dozen in ons document te plaatsen HTML, waardoor een effect ontstaat alsof het op de pagina zweeft.
Het Box Shadow-element moet als volgt zijn samengesteld:
box-shadow: hoffset voffset blur spread kleurinzet
Waar elk van zijn attributen een functie vervult, laten we elk van deze in detail bekijken:

• Hofset: Het is de horizontale offset, wat een lengtewaarde is. Een positieve waarde verdringt de Doos Schaduw aan de rechterkant, aan de andere kant, verschuift een negatieve waarde de Box Shadow naar links.

• Voffset: Het is de verticale offset, wat een lengtewaarde is. Een positieve waarde verschuift de Box Shadow onder de box van het item, en een negatieve waarde verschuift de Box Shadow boven de box van het item.

• vervagen: (Optioneel) Specificeert de straal van de schaduwdefinitie, wat een lengtewaarde is. Hoe hoger de waarde, hoe vager de rand van de doos van het item blijft. Voor de standaardwaarde 0 ziet de rand van de doosschaduw er volledig gedefinieerd uit.

• Verspreiding: (Optioneel) Specificeer de diffusiestraal van de schaduw, dit is een lengtemaat. Een positieve waarde zorgt ervoor dat de schaduw uitzet in alle richtingen van de doos van het bevattende element, en een negatieve waarde zorgt ervoor dat de schaduw van het bevattende element samentrekt.

• Kleur: (Optioneel) Dit is de kleur van de schaduw. Als het wordt weggelaten, bepaalt de browser de kleur.

• inzet: (Optioneel) Zorgt ervoor dat de schaduw wordt geworpen in het kader van het element waarop deze wordt toegepast.

Zodra we de kenmerken kennen, gaan we snel verder met een codevoorbeeld om het geleerde in de praktijk te brengen.

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

Zoals we kunnen zien, kunnen we de Doos Schaduw In de CSS binnen de stijltag genereert deze code het volgende resultaat:

Een ander interessant aspect is dat we in dezelfde verklaring van een Box Shadow verschillende schaduwen kunnen specificeren, bijvoorbeeld in de volgende code gaan we een extra schaduw in de inzet opnemen, laten we eens kijken:

 Voorbeeld
Er zijn veel verschillende soorten fruit - er zijn alleen al meer dan 500 soorten bananen. Tegen de tijd dat we de talloze soorten appels, sinaasappels en ander bekend fruit toevoegen, staan ​​we voor duizenden keuzes.

Laten we nu eens kijken hoe beide schaduwen worden weergegeven in ons element: