边界半径的边界渐变

Question

我有以下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;
}

添加border-radius:5px似乎没有做任何事情,我认为这是因为我正在使用边框渐变,有没有办法让我达到所需的5px边框半径？

Answer 1

你不能使用border-radius渐变.这是另一个想法,你可以依赖多个背景并调整background-clip:

.white-grad {
    background: 
     linear-gradient(#ccc,#ccc) 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>

Answer 2

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

我不能将此归功于我，我在一个网站上看到了这个（我忘记了该网站并且无法再次找到它）。

• 这只是一个button带有圆角边缘和渐变背景的法线
• 它使用的box-shadow就是inset将内部填充为白色
• 它有一个 2px 边框，实际上是透明的，因此按钮的边缘会透过

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>