Avrundede grenser i CSS

Grensene i CSS har en nøkkelrolle i å forme elementet. Som standard har grensen i CSS hjørner/kanter. Imidlertid lar CSS deg ha den avrundede formen på grensene. Border-radius-eiendommen til CSS gjør det mulig å endre en enkel grense til avrundede grenser. Denne artikkelen gir en demonstrasjon for å gi følgende læringsresultater:

• Hvordan grensradius fungerer
• Hvordan få de avrundede grensene i CSS

Hvordan få avrundede grenser i CSS

De avrundede grensene er sikkerhetskopiert av CSS-grensen-radius. Vi vil først se på arbeidet med grensen-radius-eiendom og deretter gi noen eksempler.

Hvordan grense-radius fungerer

Border-radius-eiendommen er den korte eiendommen som består av egenskapene som er angitt nedenfor:

Border-topp-venstre-radius, grensen-topp-radius, grense-venstre-bottom-radius og grense-høyre-bunn-radius.

Primært avhenger av grensen-radius av følgende syntaks:

Border-radius: verdi;

Ettersom grensen-radius-eiendommen er en kortfattet eiendom av fire barnegenskaper, kan den derfor akseptere mer enn verdien. Hvis du vil ha en annen radius for forskjellige grenser, kan du velge en av følgende muligheter.

runde alle grenser med samme størrelse

Border-radius: verdi;

Rundt topp til venstre/nederst til høyre og topp/høyre/nedre venstre til samme størrelse

Border-Radius: Value1 Value2;

Rundt topp til venstre, topp til høyre og nedre høyre grenser

Border-Radius: Value1 Value2 Value3;

Hvis du vil få avrundede grenser med forskjellige størrelser

Border-Radius: Value1 Value2 Value3 Value4;

De kommende eksemplene praktiseres ved hjelp av syntaksen gitt ovenfor.

Eksempel 1: Få de avrundede grensene

Koden gitt nedenfor blir utført for å få de avrundede grensene

Velkommen til Linuxhint

Valey of Tech

Guider på HTML

Guider på CSS

Koden er beskrevet som,

• Inne i taggen er dour klasser laget kalt “One”, “Two”, “Three” og “Four”
• “Én” klasse vil runde alle grensene til 20px,
• "To" -klassen vil runde topp-venstre/nederst til høyre og topp-høyre/nedre venstre grenser til 25px og 25px.
• "Tre" -klassen runder tre grenser topp til venstre, topp høyre og høyre til høyre
• Dour -klassen vil runde alle grenser til forskjellige størrelser
• Inne i taggen er fire avsnitt erklært som viser bruken av de fire CSS -klassene som er nevnt i taggen

Bildet av koden er gitt nedenfor

Bildet av utdataene på websiden vist nedenfor:

Eksempel 2: Få den avrundede grensen til valget

Eksemplet ovenfor avrunder grensene i den forhåndsdefinerte rekkefølgen. For eksempel, hvis du bruker en verdi med grensen-radius-eiendom, vil alle grenser være avrundet, på samme måte, hvis tre verdier er gitt den nederste venstre grensen.

La oss si, vi vil ikke avrunde grensen til høyre. I slike situasjoner må du bruke fire verdier og bruke 0px i stedet for bunnen til høyre. Følgende kode brukes til å øve On Choice avrundet grenseeksempel:

Velkommen til Linuxhint

Ovennevnte kode er beskrevet som:

• Border-radius-egenskapen er definert i stilkoden der 0px brukes til å hoppe over avrundingen av den nederste høyre grensen
• Border-stil brukes til bedre synlighet
• I kroppen skrives et avsnitt som den avrundede grensen brukes

Bildet av kodeditoren vises nedenfor:

Produksjon

Etter å ha gått gjennom dette, ville du ha lært arbeidet med grensradius og tilhørende egenskaper i forskjellige scenarier.

Konklusjon

Border-radius-eiendommen letter seg i å få de avrundede grensene i CSS. Grense-radius er den korte håndegenskapen og inneholder funksjonaliteter til fire egenskaper i den. Denne artikkelen demonstrerer mulige måter å få de avrundede grensene i CSS. For å gjøre dette har vi presentert arbeidet med grensen-radius eiendom i CSS. For bedre forståelse har vi dessuten også demonstrert flere eksempler for å få deg til avrundede grenser i CSS ved bruk av Border-Radius-eiendommen.