Svrha ovog priručnika je objasniti kako izraditi rubove okruglih kutova. Za ovo, prvo, moramo znati o ' granica ” vlasništvo. Dakle, počnimo!
Što je svojstvo 'border' u CSS-u?
Kako biste stvorili obrub oko elementa, morate koristiti ' granica ” vlasništvo. Koristeći ovo svojstvo, možete postaviti ' stil ”, “ boja ', i ' širina ” granice.
Sintaksa
Sintaksa svojstva granice dana je kao:
granica : širina stil boja
Ovdje je opis gore navedenih vrijednosti:
- širina: Koristi se za postavljanje širine obruba.
- stil: Koristi se za postavljanje stila obruba, kao što su točkasti, isprekidani, puni ili dvostruki.
- boja: Određuje boju obruba.
Evo primjera u kojem implementiramo ' granica ” vlasništvo.
Kako napraviti obrub pomoću CSS-a?
Da biste stvorili obrub, prvo dodajte element u HTML datoteku. Da bismo to učinili, stvorit ćemo
i
oznake:
< tijelo >
< div razreda = 'kutak' >
< h1 > Linux savjet < / h1 >
< str > Zaobljeni kutovi u CSS-u < / str >
< / div >
< / tijelo >
Zatim ćemo prijeći na odjeljak CSS.
Ovdje, ' .kutak ” koristi se za pristup klasi dodijeljenoj
.kutak {
granica : 4 px čvrsta rgb ( 248 , 6 , 107 ) ;
širina : 250 px ;
visina : 150 px ;
boja pozadine : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Nakon što ste implementirali gore navedeni kod, idite na HTML datoteku i izvršite je. Vidjet ćete sljedeći ishod:
Sada ćemo prijeći na sljedeći dio, gdje ćemo stvoriti kvadratni obrub do obruba okruglog kuta.
Kako zaokružiti kut koristeći CSS?
Da biste stvorili rub okruglog kuta, ' granični radijus ” koristi se svojstvo u kojem možete postaviti radijus kuta prema svojim željama.
Sintaksa
Sintaksa svojstva border-radius dana je u nastavku:
granica-radijus : vrijednostNastavimo s prethodnim primjerom i postavimo rubni radijus kako bismo postigli zaobljene kutove.
Primjer
u ' .kutak ' klase CSS datoteke, postavite vrijednost ' granica-radijus ' svojstvo kao ' 30 px ”:
granica-radijus : 30 px ;Dodavanjem gornjeg retka dobit ćete sljedeći izlaz:
Gornji izlaz označava da su granice uspješno promijenjene u zaobljene kutove zbog svojstva border-radius.
Zaključak
U CSS-u “ granica-radijus ” Svojstvo se koristi za promjenu kuta obruba. Oblik krivulje se mijenja prema zadanoj vrijednosti radijusa. Koristeći spomenuto svojstvo, možete postaviti radijus kuta prema vlastitom izboru. U ovom smo članku uz pomoć primjera objasnili kako zaokružiti rubove kutova pomoću svojstva border-radius.