Bordures de dégradé CSS

Bonjour, cher Khabrovites. Je vous présente la traduction d'un article de Chris Koehr.

Disons que vous avez besoin d'une bordure de dégradé autour d'un élément spécifique. Et vous, tels, pensez:

• Il n'y a pas d'API CSS simple et évidente pour cela.
• Je vais juste créer un élément wrapper avec un arrière-plan dégradé linéaire, puis l'élément intérieur bloquera la plupart de cet arrière-plan, à l'exception d'une fine ligne de remplissage autour.

Cela ressemblera à ceci:

HTML

<div class="module-border-wrap"><div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div></div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module-border-wrap { max-width: 250px; padding: 1rem; position: relative; background: linear-gradient(to right, red, purple); padding: 3px; } .module { background: #222; color: white; padding: 2rem; } 

Si vous n'aimez pas l'idée d'un élément d'habillage, vous pouvez utiliser un pseudo-élément jusqu'à ce que la valeur d'index z négative soit en ordre (cela ne se produirait pas s'il y avait beaucoup de pièces jointes d'élément parent avec leurs propres arrière-plans).

Voici un exemple de Stephen Shaw fixant le border-radius :

HTML

 <div class="gradient-box"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. </p> </div> 

 .gradient-box { display: flex; align-items: center; //width: 50vw; width: 90%; margin: auto; max-width: 22em; position: relative; padding: 30% 2em; box-sizing: border-box; $border: 5px; color: #FFF; background: #000; background-clip: padding-box; /* !importanté */ border: solid $border transparent; /* !importanté */ border-radius: 1em; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -$border; /* !importanté */ border-radius: inherit; /* !importanté */ background: linear-gradient(to right, red, orange); } } html { height: 100%; background: #000; display: flex; } body { margin: auto; } 

Mais n'oubliez pas complètement border-image , probablement la propriété CSS la plus stupide de tous les temps. Vous pouvez l'utiliser pour obtenir des bordures dégradées même sur des côtés séparés:

HTML

 <div class="module"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero pariatur corporis quaerat voluptatum eos tempora temporibus nisi voluptates sed, exercitationem sequi dolore culpa incidunt accusamus, quasi unde reprehenderit ea molestias. </div> 

 body { height: 100vh; margin: 0; display: grid; place-items: center; background: #222; } .module { max-width: 250px; padding: 1rem; color: white; border-width: 3px; border-style: solid; border-image: linear-gradient( to bottom, red, rgba(0, 0, 0, 0) ) 1 100%; } 

L'utilisation de border-image et border-image-slice est probablement la syntaxe la plus simple pour créer une bordure en dégradé, mais malheureusement, elle n'est tout simplement pas compatible avec border-radius .

HTML

 <div> <div class="on-light"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-purple"> I have a gradient </button> </div> <div class="on-light"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> <div class="on-dark"> <button class="border-gradient border-gradient-green"> I have a gradient </button> </div> </div> 

 button { background: none; text-decoration: inherit; font-family: system-ui; font-size: 1rem; padding: 1rem 2rem; } .border-gradient { border-image-slice: 1; border-width: 2px; } .border-gradient-purple { border-image: linear-gradient(to left, #743ad5, #d53a9d); } .border-gradient-green { border-image: linear-gradient(to left, #00C853, #B2FF59); } body { height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; > div { width: 100%; text-align: center; } > div > div { width: 100%; padding: 1rem; } } .on-dark { background: #222; button { color: white; } }