Selle juhendi eesmärk on selgitada, kuidas luua ümaraid nurgapiire. Selleks peame kõigepealt teadma ' piir ” vara. Niisiis, alustame!
Mis on CSS-i 'piiri' atribuut?
Elemendi ümber äärise loomiseks peate kasutama ' piir ” vara. Seda atribuuti kasutades saate määrata „ stiilis ”, „ värvi ”, ja „ laius ” piirist.
Süntaks
Piiri atribuudi süntaks antakse järgmiselt:
piir : laiuse stiilis värv
Siin on ülaltoodud väärtuste kirjeldus:
- laius: Seda kasutatakse piiri laiuse määramiseks.
- stiil: Seda kasutatakse ääriste stiili määramiseks, näiteks punktiir, katkendlik, ühtlane või kahekordne.
- värv: See määrab piiri värvi.
Siin on näide, milles rakendame piir ” vara.
Kuidas luua piire CSS-i abil?
Äärise loomiseks lisage esmalt HTML-faili element. Selleks loome
ja
abil pealkirja ja lõigu:
< keha >
< div klass = 'nurk' >
< h1 > Linuxi vihje < / h1 >
< lk > Ümarnurgad CSS-is < / lk >
< / div >
< / keha >
Järgmisena liigume CSS-i jaotisesse.
Siin on ' .nurk ” kasutatakse juurdepääsuks
.nurk {
piir : 4 pikslit tahke rgb ( 248 , 6 , 107 ) ;
laius : 250 pikslit ;
kõrgus : 150 pikslit ;
taustavärv : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Kui olete ülalnimetatud koodi rakendanud, minge HTML-faili ja käivitage see. Näete järgmist tulemust:
Nüüd liigume järgmise osa juurde, kus loome ruudukujulise äärise ümara nurga äärisele.
Kuidas CSS-i abil nurka teha?
Ümmarguse nurga äärise loomiseks piiriraadius ” on kasutusel atribuut, milles saad määrata nurga raadiuse vastavalt oma eelistustele.
Süntaks
Piiriraadiuse atribuudi süntaks on toodud allpool:
piiriraadius : väärtusJätkame eelmist näidet ja määrame ümarate nurkade saavutamiseks äärise raadiuse.
Näide
jaotises ' .nurk ' klassi CSS-faili, määrake väärtuseks ' piiri raadius ' vara kui ' 30 pikslit ”:
piiri raadius : 30 pikslit ;Kui ülaltoodud rida on lisatud, saate järgmise väljundi:
Ülaltoodud väljund tähendab, et piirid muudetakse edukalt ümarateks nurkadeks tänu piiriraadiuse omadusele.
Järeldus
CSS-is ' piiri raadius ” vara kasutatakse piiride nurga muutmiseks. Kõvera kuju muutub vastavalt antud raadiuse väärtusele. Nimetatud omadust kasutades saate nurga raadiuse määrata vastavalt oma valikule. Selles artiklis oleme näite abil selgitanud, kuidas nurga ääriseid ümardada atribuudi border-radius abil.