Chenarul CSS este o proprietate cheie folosită pentru a caracteriza și stila chenarele din jurul componentelor HTML. Granițele își asumă un rol vital în compoziția site-ului web, ajutând la separarea, accentuarea și alura elegantă. În CSS, puteți utiliza câteva proprietăți legate de chenar pentru a controla stilul, varietatea, dimensiunea și forma acestor margini. În acest articol, vom investiga aceste proprietăți ale graniței CSS și cum să le folosim cu adevărat.
Proprietăți bordura CSS
Proprietățile marginii CSS sunt utilizate pentru a determina stilul, varietatea, lățimea și fluxul și refluxul marginilor unei componente. Aceste proprietăți includ:
- stil de chenar
- chenar-culoare
- lățimea graniței
- hotar-raza
1) Stil de chenar CSS
Proprietatea Stil chenar este utilizată pentru a specifica tipul de chenar pe care doriți să îl afișați pe pagina web.
Există unele valori ale stilului de chenar care sunt utilizate cu proprietatea stil de chenar pentru a defini o chenar.
defecțiune generală de protecție
| Valoare | Descriere |
|---|---|
| nici unul | Nu definește nicio graniță. |
| punctat | Este folosit pentru a defini un chenar punctat. |
| întreruptă | Este folosit pentru a defini o chenar întreruptă. |
| solid | Este folosit pentru a defini o chenar solid. |
| dubla | Definește două chenaruri cu aceeași valoare a lățimii chenarului. |
| canelură | Definește o chenar canelată 3D. efectul este generat în funcție de valoarea culorii marginii. |
| creastă | Definește o chenar 3d crestată. efectul este generat în funcție de valoarea culorii marginii. |
| medalion | Definește un chenar 3d. efectul este generat în funcție de valoarea culorii marginii. |
| început | Definește o graniță de început 3D. efectul este generat în funcție de valoarea culorii marginii. |
Exemplu:
.border-example { width: 150px; height: 30px; margin: 10px; padding: 10px; } .dotted { border: 2px dotted #FFA500; } .dashed { border: 2px dashed #008000; } .solid { border: 2px solid #000; } .double { border: 4px double #FF0000; } .groove { border: 3px groove #3333FF; } .ridge { border: 3px ridge #660066; } .inset { border: 3px inset #006600; } .outset { border: 3px outset #990000; } Dotted Border Dashed Border Solid Border Double Border Groove Border Ridge Border Inset Border Outset Border Ieșire:
2) Lățimea marginii CSS
Proprietatea border-width este folosită pentru a seta lățimea chenarului. Este setat în pixeli. Puteți folosi și una dintre cele trei valori predefinite, subțire, medie sau groasă pentru a seta lățimea chenarului.
Notă: proprietatea border-width nu este utilizată singură. Este utilizat în mod constant cu alte proprietăți de frontieră, cum ar fi proprietatea „border-style” pentru a seta mai întâi chenarul în orice alt mod în care nu va funcționa.
/* CSS for different border widths */ .thin-border { border: 2px solid #FF0000; /* It is 2-pixel wide solid red border */ } .medium-border { border: 4px solid #00FF00; /* It is 4-pixel wide solid green border */ } .thick-border { border: 6px solid #0000FF; /* It is 6-pixel wide solid blue border */ } .custom-border { border: 3px dashed #FFA500; /* It is 3-pixel wide dashed orange border */ } <p class="thin-border"> Thin Border </p> <p class="medium-border"> Medium Border </p> <p class="thick-border"> Thick Border </p> Custom Border Ieșire:
3) CSS chenar-culoare
Există trei strategii pentru a seta culoarea chenarului.
- Nume: determină numele culorii. De exemplu: „roșu”.
- RGB: Determină valoarea RGB a culorii. De exemplu: „rgb(255,0,0)”.
- Hex: Determină valoarea hexagonală a culorii. De exemplu: „#ff0000”.
Notă: proprietatea chenar-culoare nu este utilizată singură. Este utilizat în mod constant cu alte proprietăți de frontieră, cum ar fi proprietatea „border-style” pentru a seta mai întâi chenarul în orice alt mod în care nu va funcționa.
Exemplu:
.my-element { width: 200px; height: 100px; border: 2px solid #333; /* The Initial border color is dark gray */ transition: border-color 0.5s; /* Adding a smooth transition effect */ } .my-element:hover { border-color: blue; /* This changes the border color to blue when hovering */ } Hover Ieșire:
