Css 带边界半径的边界渐变

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

添加边框半径：5px似乎没有任何作用，我想这是因为我使用的是边框渐变，有没有办法实现所需的5px边框半径？

2021：我建议使用CSS掩码版本，因为现在支持非常好

不能将

边界半径

与渐变一起使用。下面是另一个方法，您可以依赖多个背景并调整

背景剪辑

：

.white grad{
背景：
线性渐变（#ccc，#ccc）填充框，/*这是您的灰色背景*/
线性渐变（向右，#9c20aa，#fb3570）边框框；
颜色：#313149；
填充：10px；
边框：5px实心透明；
边界半径：15px；
显示：内联块；
利润率：75px0；
}

这里有一些文本
这里有一些长文本
此处的一些长文本

您需要将按钮包装在一个div中，并在该父div上设置

边框半径

。为了工作，您还必须将该父div设置为

溢出：隐藏

。像这样：

.btn wrap{
边界半径：5px；
溢出：隐藏；
利润率：20px；
宽度：60px；
}
a、 btn.white-grad{
背景：#eee；
颜色：#313149！重要；
边框：20px实心#000；
边界图像源：线性梯度（向右，#9c20aa，#fb3570）；
边界图像切片：20；
线高：2；
}

如何使用解决方案获得透明背景？谢谢我爱你@NoéVIRICEL如果将第一个线性渐变中的#ccc值更改为透明，则应work@mikespitz_8第一个不能用透明度，你需要考虑其他解决方案的透明度（SVG或面罩），这真是太棒了！真的很有帮助。谢谢！这真的很有用！