Les vores CSS són elements essencials als llocs web, que representen les vores de diversos components i elements. Les vores CSS fan referència a les línies que envolten els elements, definint les seves vores. Les vores es poden dissenyar, acolorir i dimensionar mitjançant propietats CSS com ara l'estil de la vora, el color de la vora, l'amplada de la vora i el radi de la vora. les vores es poden dissenyar amb la vora superior, la vora dreta, la vora inferior i la vora esquerra.
convertir la data en cadena
En aquest article Borders in CSS, aprendrem sobre les vores CSS, cobrint opcions d'estil, casos d'ús pràctics i bones pràctiques.
Taula de contingut
- Propietats de la frontera
- Maneres d'estilitzar la vora en CSS
- Estils de vora comuns
- Exemples d'estil de vora CSS
- Casos d'ús pràctics
- Casos d'ús CSS Borders
Propietats de la frontera
CSS ofereix diverses propietats per personalitzar les vores:
- estil de vora : determina el tipus de vora (p. ex., sòlid, puntejat, puntejat).
- ample de vora : estableix l'amplada de la vora (en píxels, punts o altres unitats).
- borde-color : Especifica el color de la vora.
- frontera-radi : Crea cantonades arrodonides per als elements.
Maneres d'estilitzar la vora en CSS
El Propietat de la vora CSS permet l'estil de la vora d'un element establint-ne l'amplada, l'estil i el color, permetent límits visuals personalitzables en el disseny web.
1. Estil de vora
- Propietat d'estil de vora superior CSS
- border-right-style Propietat
- Propietat border-bottom-style
- border-left-style Propietat
2. Amplada de la vora
- Propietat border-top-width
- Propietat border-right-width
- Propietat border-bottom-width
- Propietat border-left-width
3. Color de la vora
- Propietat border-top-color
- border-right-color Propietat
- border-bottom-color Propietat
- Propietat border-left-color
4. Vora costats individuals
5. Propietat del radi de la vora
Estils de vora comuns
La propietat d'estil de vora especifica el tipus de vora. Cap de les altres propietats de la vora funcionarà sense establir l'estil de la vora.
A continuació es mostren els tipus de vores:
- Puntejat : Crea una sèrie de punts.
- De punt : Forma una línia discontínua.
- Sòlid : Produeix una línia contínua.
- Doble : Representa dues línies paral·leles.
- Groove i Ridge : Creeu efectes estriats i estriats en 3D.
- Incrustació i Inici : Afegeix vores d'entrada i inici en 3D.
- Cap : Elimina la vora.
- Ocult : Amaga la vora.
Exemples d'estil de vora CSS
En aquest exemple farem servir la propietat d'estil de vora CSS.
HTML