Bordas de gradiente CSS

Bom dia, queridos Khabrovites. Apresento a você a tradução de um artigo de Chris Koehr.

Digamos que você precise de uma borda de gradiente em torno de um elemento específico. E você pensa assim:

• Não existe uma API CSS simples e óbvia para isso.
• Vou apenas criar um elemento wrapper com um fundo gradiente linear e, em seguida, o elemento interno bloqueará a maior parte desse fundo, exceto por uma fina linha de preenchimento em torno dele.

Será algo parecido com isto:

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; } 

Se você não gostar da ideia de um elemento de quebra automática, poderá usar um pseudo-elemento até que o valor negativo do índice z esteja em ordem (isso não aconteceria se houvesse muitos anexos de elemento pai com seus próprios planos de fundo).

Aqui está um exemplo de Stephen Shaw corrigindo o 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; } 

Mas não se esqueça completamente border-image , possivelmente a propriedade CSS mais estúpida de todos os tempos. Você pode usá-lo para obter bordas gradientes, mesmo em lados separados:

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%; } 

Usar border-image border-image-slice border-image border-image-slice é provavelmente a sintaxe mais simples para criar uma borda de gradiente, mas infelizmente não é compatível com o 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; } }