Erstellen Sie einen Verlaufsrand mit einem Randradius

Question

Ich habe das folgende CSS:

a.btn.white-grad {
    Hintergrund: $lgrey;
    Farbe: #313149 !important;
    Rand: 1px fest #000;
    border-image-source: linear-gradient(to right, #9c20aa, #fb3570);
    Randbild-Slice: 20;
    schweben: links;
    @include Schriftgröße(26);
    Rand: 75px 0;
}

Das Hinzufügen von border-radius: 5px scheint keine Auswirkung zu haben. Ich denke, das liegt daran, dass ich einen Randverlauf verwende. Gibt es eine Möglichkeit, den gewünschten Randradius von 5 Pixeln zu erreichen?

Answer 1

2023 - 单个元素，无伪元素，无SVG，无遮罩。

我不能为此负责，我在一个网站上看到的（我忘记了网站的名字，也找不到它了）。

• 它只是一个普通的带有圆角和渐变背景的按钮
• 它使用了一个inset的box-shadow来填充内部的白色
• 它有一个2px的边框，实际上是透明的，所以按钮的边缘可以透过来显示

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：如果你想要透明度，我建议使用CSS遮罩方法，因为现在的支持相当不错

---

你不能在渐变中使用border-radius。这里有另一个想法，你可以依赖多个背景并调整background-clip：

.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>