Teoría
Teoría

Desenfoque de la sombra

El tercer valor numérico indica el radio de desenfoque de la sombra.

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

Cuanto menor sea el valor, más nítida será la sombra. Con un valor de cero, la sombra no tiene desenfoque. El desenfoque no puede ser negativo. Si no se indica, su valor es cero.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desenfoque 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 un desenfoque de 5px.
Luego, muévela 70px hacia abajo.
Después, aumenta el desenfoque a 10px.