Hensikten med denne håndboken er å forklare hvordan du lager runde hjørnekanter. For dette må vi først vite om ' grense ” eiendom. Så la oss begynne!
Hva er 'grenseegenskap' i CSS?
For å lage en kantlinje rundt et element, må du bruke ' grense ” eiendom. Ved å bruke denne egenskapen kan du angi ' stil ', ' farge ', og ' bredde ' av grensen.
Syntaks
Syntaks for grenseegenskapen er gitt som:
grense : bredde stil farge
Her er beskrivelsen av verdiene ovenfor:
- bredde: Den brukes til å angi bredden på kanten.
- stil: Den brukes til å angi kantstilen, for eksempel prikkete, stiplede, solide eller doble.
- farge: Det bestemmer fargen på kanten.
Her er et eksempel der vi implementerer ' grense ' eiendom.
Hvordan lage grenser ved hjelp av CSS?
For å lage en kantlinje, legg først til et element i en HTML-fil. For å gjøre det, vil vi opprette en
og
-taggene:
< kropp >
< div klasse = 'hjørne' >
< h1 > Linux hint < / h1 >
< s > Runde hjørner i CSS < / s >
< / div >
< / kropp >
Deretter går vi til CSS-delen.
Her er ' .hjørne ” brukes for å få tilgang til klassen som er tilordnet
.hjørne {
grense : 4px fast rgb ( 248 , 6 , 107 ) ;
bredde : 250 piksler ;
høyde : 150 piksler ;
bakgrunnsfarge : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Når du har implementert koden ovenfor, gå til HTML-filen og kjør den. Du vil se følgende utfall:
Nå vil vi gå til neste del, hvor vi vil lage den firkantede grensen til den runde hjørnegrensen.
Hvordan runde hjørnet ved hjelp av CSS?
For å lage en rund hjørnekant, ' grense-radius ”-egenskapen blir brukt, der du kan stille inn radiusen til hjørnet i henhold til dine preferanser.
Syntaks
Syntaks for grense-radius-egenskapen er gitt nedenfor:
grense-radius : verdiLa oss fortsette med forrige eksempel og angi kantradius for å oppnå runde hjørner.
Eksempel
i ' .hjørne '-klassen til CSS-filen, angi verdien til ' grense-radius ' eiendom som ' 30 piksler ':
grense-radius : 30 piksler ;Med linjen ovenfor lagt til, vil du få følgende utgang:
Den ovenfor angitte utgangen betyr at grenser er vellykket endret til runde hjørner på grunn av grense-radius-egenskapen.
Konklusjon
I CSS ' grense-radius ”-egenskapen brukes til å endre hjørnet av grensene. Formen på kurven endres i henhold til den gitte verdien av radius. Ved å bruke den nevnte egenskapen kan du stille inn radiusen til hjørnet etter eget valg. I denne artikkelen har vi forklart hvordan du runder hjørnegrenser ved å bruke egenskapen border-radius ved hjelp av et eksempel.