Ejercicio 28 — Propiedad Outline en CSS

En este ejercicio se explora la propiedad outline en CSS, que permite aplicar contornos alrededor de elementos sin afectar su tamaño total. Se prueban distintos estilos, tamaños y desplazamientos del contorno para entender mejor cómo funciona esta propiedad.

Enunciado

Crear tres secciones, cada una con un cuadro dentro.
Aplicar diferentes estilos de contorno a la primera sección.
Aplicar un ancho de contorno de 5px en la segunda sección.
Usar outline-offset en la tercera sección para separar el contorno.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Contorno</title>
    <link rel="stylesheet" href="outline.css">
</head>
<body>

    <div class="seccion1">
        <div class="cuadro">
            Estilo de Contorno
        </div>
    </div>

    <div class="seccion2">
        <div class="cuadro">
            Ancho de Contorno
        </div>
    </div>

    <div class="seccion3">
        <div class="cuadro">
            Desplazamiento del Contorno
        </div>
    </div>

</body>
</html>

Código CSS

.seccion1 {
    outline-style: solid;
    outline-color: #007acc;
}

.seccion2 {
    outline-style: dashed;
    outline-color: #1aeb1a;
    outline-width: 5px;
}

.seccion3 {
    outline-offset: 10px;
    outline-style: dotted;
    outline-color: rgb(204, 17, 179);
}

🚀 Ver resultado del ejercicio