Propiedades del esquema CSS

Tabla de contenido

Un contorno es una línea dibujada fuera del borde del elemento.

This element has a black border and a green outline with a width of 10px.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid black;
  outline: #4CAF50 solid 10px;
  margin: auto;  
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>

</body>
</html>

Esquema CSS

Un contorno es una línea que se dibuja alrededor de los elementos, FUERA de los bordes, para que el elemento "se destaque".

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 es dibujado fuera del borde del elemento y puede superponerse a otro contenido. Además, el esquema es NO forma parte de las dimensiones del elemento; el ancho y alto total del elemento no se ve afectado por el ancho del contorno.

Estilo de esquema CSS

La propiedad outline-style especifica el estilo del esquema, y puede tener uno de los siguientes valores:

dotted: - Define un contorno de puntos
dashed: - Define un contorno discontinuo
solid: - Define un contorno sólido
double: - Define un doble contorno.
groove: - Define un contorno ranurado 3D
ridge: - Define un contorno estriado 3D
inset: - Define un contorno insertado en 3D
outset: - Define un esquema de inicio 3D
none: - No define ningún contorno
hidden: - Define un contorno oculto

El siguiente ejemplo muestra los diferentes valores de outline-style:

Ejemplo

Demostración de los 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 :

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.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}

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;}
</style>
</head>
<body>

<h2>The outline-style Property</h2>

<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>

</body>
</html>

Nota: Ninguna de las otras propiedades del esquema (sobre las cuales aprenderá más en los próximos capítulos) tendrá NINGÚN efecto a menos que ¡La propiedad class="w3-codespan">outline-style está configurada!