Comment puis-je créer des coins arrondis avec une bordure dégradée en CSS ?

Implémentation de Border-Radius et d'images de bordure dégradées

Styler des éléments avec une bordure arrondie et un dégradé peut être un défi. Tenter de combiner les propriétés border-radius et border-image entraîne souvent soit des coins arrondis sans dégradé, soit une bordure dégradée sans arrondi.

Solution :

Heureusement, il est possible d'obtenir à la fois des coins arrondis et des bordures dégradées en utilisant une combinaison de techniques CSS. Voici une solution non SVG qui offre une approche plus concise :

div {
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white),
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

Explication :

• La double bordure transparente définit la largeur et élimine toute initiale border color.
• La propriété background-image crée deux dégradés : un blanc au début et un coloré vers le end.
• background-origin : border-box positionne le dégradé sur la bordure, en l'alignant avec les coins arrondis.
• background-clip : content-box, border-box contrôle la façon dont le dégradé est coupé, garantissant que la bordure reste remplie de dégradé et que la zone intérieure reste blanche.

Avec cette technique, vous pouvez combiner avec style coins arrondis et dégradé frontières.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!