Gebruik van randen en achtergronden in HTML5

Er is eigenschappen die veel worden gebruikt in HTML en CSS, zoals randen en achtergronden, Sinds de integratie van CSS3 zijn ze zodanig verbeterd dat we bijvoorbeeld afgeronde hoeken kunnen hebben, hoewel het iets dat er vrij eenvoudig uitziet, was dit in het verleden niet beschikbaar, dus deze functionaliteiten vergemakkelijken nu op een behoorlijke manier uitbreidingen het werk van zowel ontwerpers als ontwikkelaars.
Bij het aanbrengen van een edge moeten we rekening houden met 3 zeer belangrijke attributen, dit zijn:

• grensbreedte: initialiseert de breedte van de rand.
• rand-stijl: initialiseert de stijl voor het tekenen van de rand.
• rand kleur: initialiseert de randkleur.

Als u eenmaal bekend bent met de eigenschappen, laten we eens kijken naar een eenvoudig voorbeeld van het toepassen van een rand:

 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.

Om de breedte van de rand te definiëren, kunnen we werken op basis van 3 metingen, per maateenheid zoals: pixels, cm, em; door percentages en door voorinstellingen zoals, dun, medium en dik.
We definiëren het type rand met de stijl, hiervoor hebben we de volgende opties:

• geen
• gestreept
• gestippeld
• dubbele
• groef
• inzet
• begin
• bergkam
• stevig

Laten we nu grafisch bekijken wat elk van deze stijlen betekent:

Er is ook de mogelijkheid om een ​​rand en een stijl toe te passen op elk van de zijden van het element, hiervoor zullen we de volgende instructies gebruiken:
[kleur = # d3d3d3] grens-top-breedte
border-top-stijl
border-top-kleur [/ kleur]
grens-onder-breedte
border-bottom-stijl
rand-onder-kleur
[kleur = # d3d3d3] grens-links-breedte
border-links-stijl
rand-links-kleur [/ kleur]
[kleur = # d3d3d3] grens-rechts-breedte
border-right-stijl
rand-rechts-kleur [/ kleur]
Waar bovenkant verwijst naar de bovenkant, onderkant naar de onderste, links naar links en Rechtsaf aan de rechterkant.
Hiermee kunnen we zelfs combinaties van soorten randen in hetzelfde element realiseren.
Laten we een voorbeeld van het laatste bekijken:

 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.

De code geeft ons de volgende resultaten:

Om de afgeronde randen te maken, kunnen we de eigenschap gebruiken straal waarmee we de kromtestraal van de rand kunnen aangeven.
Laten we eens kijken hoe we de code kunnen implementeren:

 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.

Dit resulteert in het volgende scherm:

Hiermee sluiten we deze tutorial over deze elementen af, we kunnen nu zonder veel moeite en met geavanceerde technologische hulpmiddelen verbeteringen in onze CSS opnemen.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven