Créer une bordure dégradée avec un rayon de bordure

Question

J'ai le CSS suivant :

a.btn.white-grad {
    arrière-plan : $lgris ;
    couleur : #313149 !important ;
    bordure : 1px solide #000 ;
    border-image-source : gradient-linéaire (à droite, #9c20aa, #fb3570) ;
    bordure-image-tranche : 20 ;
    flotteur : gauche ;
    @include taille de police (26);
    marge : 75px 0 ;
}
L'ajout de border-radius: 5px ne semble avoir aucun effet. Je pense que c'est parce que j'utilise un dégradé de bordure... Existe-t-il un moyen d'obtenir le rayon de bordure souhaité de 5 pixels ? 

Answer 1

2023 - Élément unique, pas de pseudo-éléments, pas de SVG, pas de masques.

Je ne peux pas en être responsable, je l'ai vu sur un site internet (j'ai oublié le nom du site et je ne le trouve pas).

• C'est juste un bouton ordinaire avec des coins arrondis et un fond dégradé
• Il utilise un inset的box-shadow pour remplir le blanc intérieur
• Il a une bordure de 2 pixels et est en fait transparent, donc les bords du bouton apparaissent à travers

body {
  background: aliceblue;
}

.gradient-border {  
  border-radius: 24px;
  padding: 6px 12px;
  background-image: linear-gradient(90deg, red 0%, blue 100%);
  /* 填充内部白色 */
  background-origin: border-box;
  box-shadow: inset 0 1000px white;
  /* 透明边框，所以按钮的边缘可以透过来显示 */
  border: 2px solid transparent;
}

<button class="gradient-border">Hello</button>

Answer 2

2021 : Si vous souhaitez de la transparence, je vous recommande d'utiliser la méthode du masque CSS car le support est plutôt bon maintenant

---

Vous ne pouvez pas utiliser border-radius。这里有另一个想法，你可以依赖多个背景并调整background-clip dans les dégradés :

.white-grad {
  background: 
    linear-gradient(#ccc 0 0) padding-box, /*这是你的灰色背景*/
    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"> 这里放置一些文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字</div>

<div class="white-grad"> 这里放置一些很长很长的文字<br>这里放置一些很长的文字</div>