Teoría
Teoría

Varios bordes en un mismo elemento

Con varias sombras puedes crear muchos efectos interesantes.

Por ejemplo, puedes imitar varios bordes en un mismo elemento. Basta con agregar varias sombras con expansión positiva y con desplazamientos y desenfoque iguales a cero.

Hay un detalle: con box-sizing: content-box, los bordes reales aumentan el tamaño del elemento, pero las sombras no. Deja suficiente espacio alrededor del elemento para que sus sombras no cubran los elementos vecinos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Varios bordes en un mismo elemento</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn" type="button">Botón</button> </body> </html>

CSS

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; border-radius: 5px; background-color: #34495e; color: white; text-align: center; text-transform: uppercase; font: inherit; }

ObjetivosRealizado

Agrega tres sombras al botón. En todas, el desplazamiento horizontal, el vertical y el desenfoque deben ser cero.

Primera sombra: expansión de 5px, color #e74c3c.
Segunda sombra: expansión de 10px, color #f1c40f.
Tercera sombra: expansión de 15px, color #2ecc71.