Esquema CSS
Un contorno es una línea dibujada fuera del borde del elemento.
Esquema CSS
Un contorno es una línea que se dibuja alrededor de los elementos, FUERA de los bordes, para que el elemento "resalte".
CSS tiene las siguientes propiedades de esquema:
-
outline-style -
outline-color -
outline-width -
outline-offset -
outline
Nota: ¡ El contorno difiere de los bordes ! A diferencia del borde, el contorno se dibuja fuera del borde del elemento y puede superponerse a otro contenido. Además, el contorno NO forma parte de las dimensiones del elemento; el ancho y la altura totales del elemento no se ven afectados por el ancho del contorno.
Estilo de esquema CSS
La outline-stylepropiedad especifica el estilo del contorno y puede tener uno de los siguientes valores:
dotted- Define un contorno punteadodashed- Define un contorno discontinuosolid- Define un contorno sólidodouble- Define un doble contornogroove- Defines a 3D grooved outlineridge- Defines a 3D ridged outlineinset- Defines a 3D inset outlineoutset- Defines a 3D outset outlinenone- Defines no outlinehidden- Defines a hidden outline
The following example shows the different outline-style values:
Example
Demonstration of the different outline styles:
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;}
Result:
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the
outline-style property is set!