Scopul acestui manual este de a explica cum se creează chenarele de colț rotunde. Pentru aceasta, în primul rând, trebuie să știm despre „ frontieră ” proprietate. Deci, să începem!
Ce este proprietatea „border” în CSS?
Pentru a crea o chenar în jurul unui element, trebuie să utilizați „ frontieră ” proprietate. Folosind această proprietate, puteți seta „ stil ”, “ culoare ', și ' lăţime ” de graniță.
Sintaxă
Sintaxa proprietății border este dată astfel:
frontieră : culoare stil latime
Iată descrierea valorilor de mai sus:
- lăţime: Este folosit pentru a seta lățimea chenarului.
- stil: Este folosit pentru a seta stilul de chenar, cum ar fi punctat, punctat, solid sau dublu.
- culoare: Determină culoarea chenarului.
Iată un exemplu în care implementăm „ frontieră ” proprietate.
Cum se creează chenar folosind CSS?
Pentru a crea o chenar, mai întâi, adăugați un element într-un fișier HTML. Pentru a face acest lucru, vom crea un
și
:
< corp >
< div clasă = 'colţ' >
< h1 > Sugestie Linux < / h1 >
< p > Colțuri rotunjite în CSS < / p >
< / div >
< / corp >
În continuare, vom trece la secțiunea CSS.
Aici ' .colţ ” este folosit pentru a accesa clasa atribuită
.colţ {
frontieră : 4px solid rgb ( 248 , 6 , 107 ) ;
lăţime : 250px ;
înălţime : 150px ;
culoare de fundal : rgb ( 2. 3. 4 , 0 , 255 ) ;
}
Odată ce ați implementat codul menționat mai sus, mergeți la fișierul HTML și executați-l. Veți vedea următorul rezultat:
Acum, vom trece la următoarea parte, unde vom crea marginea pătrată până la marginea colțului rotund.
Cum să rotunjesc colțul folosind CSS?
Pentru a crea o chenar de colț rotund, „ hotar-raza Se folosește proprietatea ” în care puteți seta raza colțului în funcție de preferințe.
Sintaxă
Sintaxa proprietății border-radius este dată mai jos:
hotar-raza : valoareSă continuăm exemplul anterior și să setăm raza graniței pentru a obține colțuri rotunjite.
Exemplu
În „ .colţ ” din fișierul CSS, setați valoarea ” hotar-raza „proprietate ca „ 30px ”:
hotar-raza : 30px ;Cu linia de mai sus adăugată, veți obține următoarea ieșire:
Ieșirea de mai sus înseamnă că marginile sunt schimbate cu succes în colțuri rotunjite din cauza proprietății border-radius.
Concluzie
În CSS „ hotar-raza ” proprietatea este folosită pentru a schimba colțul granițelor. Forma curbei se modifică în funcție de valoarea dată a razei. Folosind proprietatea menționată, puteți seta raza colțului după alegerea dvs. În acest articol, am explicat cum să rotunjim marginile de colț folosind proprietatea border-radius cu ajutorul unui exemplu.