Web.CSS.Contornos.
Los contornos es un escalón existente que hay por encima de los bordes, es decir, es un línea que rodea el borde y desde CSS se puede dar forma con la propiedad Outline.
Outline-Color y Outline-style.
Se utiliza para darle un color y un estilo al contorno. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
outline-style: double;
outline-color: red;
}
</style>
</head>
<body>
<h2>Ejemplo de outline</h2>
<p>Es un texto de ejemplo para ver los resultados.</p>
</body>
</html>En este ejemplo le damos un estilo determinado al párrafo. El contorno se le da un estilo doble y de color rojo.
El outline-style puede coger los mismos valores que los bordes:
dotted
dashed
solid
double
groove
ridge
inset
outsetOutline-width.
Sirve para darle anchura al contorno. Un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid black;} p.one {
outline-style: double;
outline-color: red;
outline-width: thick;
} p.two {
outline-style: double;
outline-color: green;
outline-width: 3px;
}
</style>
</head>
<body>
<h2>Outline Width</h2>
<p class="one">Texto de ejemplo para ver los resultados.</p>
<p class="two">Texto de ejemplo para ver los resultados.</p>
</body>
</html>
Los valores que puede albergar outline-width son los mimos que border-width, es decir, en píxeles o usando los valores predeterminados thin, medium y thick (fino, medio y grueso).
Agrupar todos las propiedades en una sola instrucción.
Se puede especificar los 3 posibles valores de una sola la vez, pero el orden debe cambiar. Un ejemplo:
...
p {
border: 1px solid black;
outline: 5px dotted red;
}
...El orden correcto para entender la instrucción sería outline-width, outline-style y outline-color.
