La propiedad abreviada CSS de contorno permite dibujar una línea alrededor del elemento, fuera del borde. Se utiliza para establecer todas las propiedades del esquema en una sola declaración. Las propiedades de contorno CSS se pueden clasificar en 4 tipos, a saber, estilo de contorno, color de contorno, ancho de contorno y desplazamiento de contorno. Discutiremos todos los tipos de propiedades de contorno secuencialmente a través de los ejemplos.
Propiedades: hay muchas propiedades que se incluyen en la colección de esquemas de CSS, todas ellas están bien descritas con el ejemplo.
Estilo de contorno : Se utiliza para establecer la apariencia del contorno de un elemento, es decir, nos indica el estilo o tipo de contorno. No se puede acceder a ninguna otra propiedad de esquema sin establecer el estilo de esquema. Si está ausente, el estilo predeterminado se establecerá en ninguno.
Sintaxis:
outline-style: auto|none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Ejemplo: Este ejemplo ilustra la propiedad Esquema donde el estilo se establece en las líneas de puntos.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.dotted {
outline-style: dotted;
color: green;
text-align: center;
}
</style>
</head>
<body >
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p class="dotted">A Computer Science portal for geeks.</p>
</body>
</html>
Producción:
Color del contorno : se utiliza para establecer el color del contorno de un elemento. El color se puede establecer por su nombre, es decir, valor rgb o valor hexadecimal, etc. Si está ausente, el color predeterminado será el color actual.
Sintaxis:
outline-color: <color> | invert | inherit;
Ejemplo: Este ejemplo ilustra la propiedad Esquema donde el color se establece en el valor de color específico.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: solid orange 4px;
outline-style: solid;
outline-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for geeks.</p>
</body>
</html>
Producción:
Ancho del contorno : se utiliza para especificar el ancho de este contorno para un elemento específico. El ancho del contorno se puede establecer especificando el tamaño del ancho en px, cm, pt, etc., o usando términos como delgado, grueso, medio. Si está ausente, el ancho predeterminado será el medio.
Sintaxis :
outline-width: medium|thin|thick|length|initial|inherit;
Ejemplo: Este ejemplo ilustra la propiedad Esquema donde el ancho se establece en el valor específico.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: solid green 4px;
outline-style: solid;
outline-width: 3px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for geeks.</p>
</body>
</html>
Producción:
Desplazamiento de contorno : la propiedad de desplazamiento de contorno de CSS establece la cantidad de espacio entre un contorno y el borde o borde de un elemento. Un contorno es una línea dibujada alrededor de elementos fuera del borde del borde. El espacio entre el elemento y su contorno es transparente. Además, el contorno puede ser no rectangular. El valor predeterminado es 0.
Sintaxis:
outline-offset: length|initial|inherit;
Ejemplo: Este ejemplo ilustra la propiedad Esquema donde el desplazamiento se define con un valor específico.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: solid green 3px;
outline-style: solid;
outline-offset: 3px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Outline Property</h3>
<p>A Computer Science portal for geeks.</p>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Internet Explorer 8.0
- Firefox 1.5
- Ópera 7.0
- Safari 1.2
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA