La vora CSS és una propietat clau que s'utilitza per caracteritzar i estilitzar les vores al voltant dels components HTML. Les fronteres assumeixen una part vital en la composició del lloc web, ajuden a fer la separació, l'èmfasi i l'atractiu elegant. A CSS, podeu utilitzar algunes propietats relacionades amb les vores per controlar l'estil, la varietat, la mida i la forma d'aquestes vores. En aquest article, investigarem aquestes propietats de la vora CSS i com utilitzar-les realment.
Propietats de la vora CSS
Les propietats de la vora CSS s'utilitzen per determinar l'estil, la varietat, l'amplada i el flux i el reflux de les vores d'un component. Aquestes propietats inclouen:
- estil de vora
- borde-color
- ample de vora
- frontera-radi
1) Estil de vora CSS
La propietat d'estil de vora s'utilitza per especificar el tipus de vora que voleu mostrar a la pàgina web.
Hi ha alguns valors d'estil de vora que s'utilitzen amb la propietat d'estil de vora per definir una vora.
| Valor | Descripció |
|---|---|
| cap | No defineix cap frontera. |
| puntejada | S'utilitza per definir una vora puntejada. |
| puntejat | S'utilitza per definir una vora discontinua. |
| sòlid | S'utilitza per definir una vora sòlida. |
| doble | Defineix dues vores amb el mateix valor d'amplada de vora. |
| solc | Defineix una vora acanalada en 3D. L'efecte es genera segons el valor del color de la vora. |
| carena | Defineix una vora cresta 3D. L'efecte es genera segons el valor del color de la vora. |
| inserit | Defineix una vora inserida en 3D. L'efecte es genera segons el valor del color de la vora. |
| inici | Defineix una vora inicial en 3D. L'efecte es genera segons el valor del color de la vora. |
Exemple:
.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 Sortida:
2) Ample de vora CSS
La propietat border-width s'utilitza per definir l'amplada de la vora. Està configurat en píxels. També podeu utilitzar un dels tres valors predefinits, prim, mitjà o gruixut per definir l'amplada de la vora.
Nota: la propietat d'amplada de vora no s'utilitza sola. S'utilitza constantment amb altres propietats de vora com la propietat 'estil de vora' per establir primer la vora de qualsevol altra manera en què no funcioni.
/* 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 Sortida:
3) Color de vora CSS
Hi ha tres estratègies per establir el color de la vora.
- Nom: determina el nom del color. Per exemple: 'vermell'.
- RGB: determina el valor RGB del color. Per exemple: 'rgb(255,0,0)'.
- Hexadecimal: determina el valor hexadecimal del color. Per exemple: '#ff0000'.
Nota: la propietat border-color no s'utilitza sola. S'utilitza constantment amb altres propietats de la vora, com ara la propietat 'estil de la vora', per establir primer la vora de qualsevol altra manera en què no funcioni.
Exemple:
.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 Sortida:
