Teoría
Teoría

Desenfoque + expansión

El desenfoque y la expansión se pueden combinar para controlar qué tan oscura se ve una sombra. Con el mismo color, estas combinaciones dan resultados distintos:

con desenfoque y expansión negativa, la sombra se ve muy clara;
con desenfoque y expansión cero, la sombra se ve normal;
con desenfoque mayor que una expansión positiva, la sombra se ve más oscura que con expansión cero;
con desenfoque menor que una expansión positiva, la sombra se ve muy oscura.

Ahora experimenta con estas combinaciones.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Desenfoque + expansión</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn btn1" type="button">Botón 1</button> <button class="btn btn2" type="button">Botón 2</button> <button class="btn btn3" type="button">Botón 3</button> <button class="btn btn4" type="button">Botón 4</button> </body> </html>

CSS

.btn1 { box-shadow: 0 0 0 0 #34495e; } .btn2 { box-shadow: 0 0 0 0 #34495e; } .btn3 { box-shadow: 0 0 0 0 #34495e; } .btn4 { 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: 50px 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 del primer botón un desenfoque de 6px y una expansión de -2px.
Asigna a la sombra del segundo botón un desenfoque de 6px.
Asigna a la sombra del tercer botón un desenfoque de 6px y una expansión de 3px.
Asigna a la sombra del cuarto botón un desenfoque de 3px y una expansión de 6px.