Användning av gränser och bakgrunder i HTML5

Det finns egenskaper som ofta används i HTML och CSS som gränser och bakgrunder, Sedan införandet av CSS3 har de förbättrats på ett sådant sätt att vi till exempel kan ha rundade kanter, även om det är något som ser ganska enkelt ut, var det inte tillgängligt tidigare, så dessa funktioner underlättar nu på ett riktigt sätt expanderar både designers och utvecklares arbete.
När vi applicerar en kant måste vi ta hänsyn till 3 mycket viktiga attribut, dessa är:

• gränsbredd: initierar bredden på gränsen.
• gränsstil: initierar stilen för att rita gränsen.
• gräns färg: initierar kantfärgen.

När du är bekant med egenskaperna, låt oss titta på ett enkelt exempel på att applicera en kant:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

För att definiera gränsens bredd kan vi arbeta baserat på 3 mätningar, med måttenheter som t.ex. pixlar, cm, em; med procentsatser och förinställningar som, tunn, medium och tjock.
Vi definierar typen av kant med stilen, för detta har vi följande alternativ:

• ingen
• streckade
• prickad
• dubbel
• räffla
• infälld
• början
• bergsrygg
• fast

Låt oss nu se grafiskt vad var och en av dessa stilar betyder:

Det finns också möjlighet att applicera en kant och en stil på var och en av elementets sidor, för detta kommer vi att använda följande instruktioner:
[color = # d3d3d3] kant-topp-bredd
kant-topp-stil
kant-topp-färg [/ färg]
kant-botten-bredd
kant-botten-stil
kant-botten-färg
[color = # d3d3d3] kant-vänster-bredd
gräns-vänster-stil
kant-vänster-färg [/ färg]
[color = # d3d3d3] kant-höger-bredd
gräns-höger-stil
kant-höger-färg [/ färg]
Var topp hänvisar till toppen, botten till den nedre, vänster till vänster och rätt till höger.
Med detta kan vi till och med uppnå kombinationer av typer av kanter i samma element.
Låt oss se ett exempel på det senare:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Koden ger oss följande resultat:

För att skapa de rundade kanterna kan vi använda fastigheten radie som gör att vi kan ange kantens krökningsradie.
Låt oss se hur du implementerar koden:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Detta resulterar i följande skärm:

Med detta avslutar vi denna handledning om dessa element, vi kan nu införliva förbättringar på vår CSS utan större ansträngning och med avancerade tekniska verktyg.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng