Bordes degradados en CSS | Programar Plus

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.

(Visited 3 times, 1 visits today)