Digamos que necesita un borde degradado alrededor de un elemento. Mi mente es así:
- No existe una API CSS simple y obvia para esto.
- Solo haré un elemento de envoltura con un
linear-gradient
background, un elemento interno bloqueará la mayor parte de ese fondo, excepto una delgada línea de relleno a su alrededor.
Quizás así:
Si odia la idea de un elemento de envoltura, puede usar un pseudoelemento, siempre que un valor de índice z negativo esté bien (no lo sería si hubiera mucho anidamiento con elementos padres con sus propios antecedentes) .
Aquí hay un ejemplo de Stephen Shaw de eso, abordando border-radius
en el proceso:
Incluso podría colocar lados individuales como rectángulos de pseudoelementos delgados si no necesitara los cuatro lados.
Pero no te olvides totalmente de border-image
, quizás la propiedad CSS más obtusa de todos los tiempos. Puede usarlo para obtener bordes degradados incluso en lados individuales:
Usando ambos border-image
y border-image-slice
es probablemente la sintaxis más fácil posible para un borde degradado, simplemente es incompatible con border-radius
, Desafortunadamente.