Teoría
Teoría

Medidas en las propiedades personalizadas

Las propiedades personalizadas no solo sirven para guardar colores. También pueden guardar, por ejemplo, tamaños y valores de espaciado. La unidad forma parte del valor: 12px, no solo 12.

El valor que insertamos debe ser válido para la propiedad CSS que lo recibe. Por ejemplo, border-radius acepta una longitud en píxeles para redondear las esquinas.

Redondeemos por igual las esquinas de la tarjeta y de la foto. Para trabajar con la foto, ya agregamos una regla vacía .card__image al final de los estilos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Introducción a las propiedades personalizadas</title> <link rel="stylesheet" href="card.css"> <link rel="stylesheet" href="style.css"> </head> <body> <article class="card"> <img class="card__image" src="karpovka-400.jpg" width="200" height="100" alt="Paseo junto al río Karpovka"> <div class="card__content"> <h2 class="card__title">Paseo junto al río Karpovka</h2> <p class="card__description"> Un pintoresco rincón de San Petersburgo, ideal para salir a caminar. </p> <a class="card__button" href="#">Más información</a> </div> </article> </body> </html>

CSS

.card { --card-color: #14a76c; } .card__title { color: var(--card-color); } .card__button { background-color: var(--card-color); } .card__image { }

ObjetivosRealizado

En la regla .card, declara --card-radius con el valor 12px.
En la regla .card, establece border-radius: var(--card-radius).
En la regla .card__image, establece border-radius: var(--card-radius).