in

:

< telo >

< div razred = 'kotiček' >

< h1 > Linux namig < / h1 >

< str > Zaobljeni vogali v CSS < / str >

< / div >

< / telo >

Nato se bomo premaknili na razdelek CSS.

Tukaj je ' .kotiček ” se uporablja za dostop do razreda, dodeljenega

. Po tem bomo ustvarili obrobo z uporabo ' meja ' in dodelite vrednosti širine, sloga in barve kot ' 4px ”, “ trdna «, in » rgb(248, 6, 107) «, oz. Poleg tega bomo dodali širino ' 250 slikovnih pik ', višina' 150 slikovnih pik «, in barva ozadja » rgb(234, 0, 255) ” za div:

.kotiček {

meja : 4px trdna rgb ( 248 , 6 , 107 ) ;

premer : 250 slikovnih pik ;

višina : 150 slikovnih pik ;

Barva ozadja : rgb ( 2. 3. 4 , 0 , 255 ) ;

}

Ko implementirate zgoraj omenjeno kodo, pojdite na datoteko HTML in jo izvedite. Videli boste naslednji rezultat:

Zdaj se bomo premaknili na naslednji del, kjer bomo ustvarili kvadratno obrobo do obrobe okroglega vogala.

Kako zaokrožiti vogal s pomočjo CSS?

Če želite ustvariti obrobo okroglega kota, uporabite » mejni polmer ” se uporablja lastnost, v kateri lahko nastavite polmer vogala po svojih željah.

Sintaksa

Sintaksa lastnosti border-radius je podana spodaj:

mejni polmer : vrednost

Nadaljujmo s prejšnjim primerom in nastavimo polmer obrobe, da dosežemo okrogle vogale.

Primer

V ' .kotiček ' datoteke CSS, nastavite vrednost ' mejni polmer » lastnina kot « 30 slikovnih pik ”:

mejni polmer : 30 slikovnih pik ;

Z dodano zgornjo vrstico boste dobili naslednji rezultat:

Zgornji izhod pomeni, da so obrobe uspešno spremenjene v okrogle vogale zaradi lastnosti border-radius.

Zaključek

V CSS ' mejni polmer Lastnost se uporablja za spreminjanje vogala obrob. Oblika krivulje se spreminja glede na dano vrednost radija. Z omenjeno lastnostjo lahko nastavite polmer vogala po svoji izbiri. V tem članku smo s pomočjo primera razložili, kako zaokrožiti vogalne robove z uporabo lastnosti border-radius.