Contorno de CSS
- Página anterior Modelo de cuadro de CSS
- Página siguiente Anchura del contorno de CSS
Contorno de CSS
El contorno es una línea dibujada alrededor del elemento, fuera del borde, para resaltar el elemento.
CSS tiene las siguientes propiedades de contorno:
outline-style
outline-color
outline-width
outline-offset
outline
Atención:El contorno conBorde¡Diferentes! La diferencia radica en que el contorno se dibuja fuera del borde del elemento y puede superponerse a otros contenido. Del mismo modo, el contorno no es parte del tamaño del elemento; el ancho y la altura total del elemento no se ven afectados por el ancho de la línea de contorno.
Estilo de contorno de CSS
La propiedad outline-style especifica el estilo del contorno y puede establecer los siguientes valores:
punteado
- Definir un contorno punteado.punteado
- Definir un contorno punteado.sólido
- Definir un contorno sólido.doble
- Definir un contorno doble.hundido
- Definir un contorno hundido en relieve 3D.saliente
- Definir un contorno saliente en relieve 3D.hundido
- Definir un contorno hundido 3D.saliente
- Definir un contorno saliente 3D.ninguno
- Definir sin contorno.oculto
- Definir un contorno oculto.
El siguiente ejemplo muestra diferentes valores de outline-style:
Ejemplo
Se muestra diferentes estilos de contorno:
p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;}
Resultado:
Borde punteado.
Borde discontinuo.
Borde sólido.
Borde doble.
Borde rebajado 3D. Este efecto depende del valor outline-color.
Borde rebajado 3D. Este efecto depende del valor outline-color.
Borde rebajado 3D. Este efecto depende del valor outline-color.
Borde perfilado 3D. Este efecto depende del valor outline-color.
Atención:A menos que se establezca outline-style
La propiedad outline no tiene efecto, a menos que se establezca (se detallará en el siguiente capítulo)!
- Página anterior Modelo de cuadro de CSS
- Página siguiente Anchura del contorno de CSS