Teoría
Teoría

Expansión de la sombra

El cuarto valor numérico indica la expansión de la sombra.

box-shadow:
[inset]  — interior
5px      — desplazamiento en x
10px     — desplazamiento en y
[2px]    — desenfoque
[3px]   <— expansión
[red];   — color

La expansión cambia el tamaño de la sombra antes de aplicar el desenfoque.

Si la expansión es cero o no se indica, la sombra tiene el mismo tamaño que el elemento. Con una expansión positiva, la sombra es más grande; con una negativa, es más pequeña.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Expansión de la sombra</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn" type="button">Botón</button> </body> </html>

CSS

.btn { box-shadow: 0 0 0 0 #34495e; } body { background-image: url("bg.jpg"); font-size: 18px; font-family: "Tahoma", sans-serif; } .btn { display: block; margin: 100px auto; padding: 15px 20px; width: 150px; border: none; box-sizing: content-box; background-color: #3498db; color: white; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Asigna a la sombra inicial una expansión de 5px.
Luego, muévela 70px hacia abajo.
Después, cambia la expansión a -5px.