Degradado de borde con radio de borde

Resuelto Mateus Dinotto asked hace 6 años • 0 respuestas

Tengo el siguiente CSS:

a.btn.white-grad {
    background: $lgrey;
    color: #313149 !important;
    border: 1px solid #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    border-image-slice: 20;
    float: left;
    @include font-size(26);
    margin: 75px 0;
}

Agregar border-radius: 5pxno parece hacer nada. Pensé que es porque estoy usando un degradado de borde... ¿hay alguna manera de lograr el radio de borde deseado de 5px?

Mateus Dinotto avatar Jul 24 '18 17:07 Mateus Dinotto
Aceptado

2024 : si quieres transparencia , recomiendo usar el método de máscara CSS ya que el soporte es bastante bueno ahora


No se puede utilizar border-radiuscon degradado. Aquí hay otra idea en la que puede confiar en múltiples antecedentes y ajustar background-clip:

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*this is your grey background*/
    linear-gradient(to right, #9c20aa, #fb3570) border-box;
  color: #313149;
  padding: 10px;
  border: 5px solid transparent;
  border-radius: 15px;
  display: inline-block;
  margin: 75px 0;
}
<div class="white-grad"> Some text here</div>

<div class="white-grad"> Some long long long text here</div>

<div class="white-grad"> Some long long <br>long text here</div>
Expandir fragmento

Degradado de borde CSS con radio


Método de máscara CSS

Aquí hay una idea diferente con CSS usando maskdonde tendrás transparencia y también será responsivo:

Mostrar fragmento de código

Radio de borde CSS con degradado lineal

Con las variables CSS, podemos facilitar el ajuste:

Mostrar fragmento de código

Máscara de degradado CSS con radio de borde

Pregunta relacionada para obtener un efecto diferente: ¿Cómo se aplica un degradado de exterior a interior, solo a los bordes, en CSS?


Los ejemplos anteriores cubren también la forma del círculo:

Mostrar fragmento de código

Borde circular CSS con degradado

Pregunta relacionada en caso de que quieras aplicar una animación al borde: Botón con fondo transparente y borde degradado giratorio


También diferentes formas de radio:

Mostrar fragmento de código

Forma curva CSS con borde degradado

y diferente grosor de borde:

Mostrar fragmento de código

Forma curva de gradiente lineal


método SVG

También puedes considerar SVG como a continuación:

Mostrar fragmento de código

Que puedes aplicar como fondo:

Mostrar fragmento de código

Y de la misma manera que maskpuedes obtener el degradado fuera del SVG:

Mostrar fragmento de código

Degradado de borde CSS con máscara SVG


También puedes usarlo como elemento común y considerar position:absolutecolocarlo alrededor del texto:

Mostrar fragmento de código

Temani Afif avatar Jul 24 '2018 10:07 Temani Afif

2023: elemento único, sin pseudoelementos, sin SVG, sin máscaras.

No puedo atribuirme el mérito por esto, lo vi en un sitio web (olvidé el sitio y no puedo encontrarlo nuevamente).

  • Es simplemente normal buttoncon bordes redondeados y un fondo degradado.
  • Se utiliza una box-shadowque es insetpara rellenar el interior de blanco.
  • Tiene un borde de 2px que en realidad es transparente, por lo que el borde del botón se ve a través.

body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* Fill the inside with white */
  background-origin: border-box;
  box-shadow: inset 0 100vw white;
  /* A transparent border, so the very edge of the button shows through */
  border: 2px solid transparent;
}
<button class="gradient-border">Hello</button>
Expandir fragmento

mikemaccana avatar May 20 '2023 20:05 mikemaccana