CSS：gardient border + border-radius

Question

是否可以创建渐变边框并结合边框半径？

我创建了一个带有::after元素的按钮

button{
    background: -webkit-gradient ...
}

button::after{
    content: '';
    position: absolute;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    left: 1px;
    top: 1px;
    background: rgba(16,20,28,1);
    border-radius: 40px;
    z-index: -1;
}

看起来像：

问题是内部元素应该是透明的。如果background-color的{​​{1}}属性设置为button，则按钮会显示transparent元素的颜色（gardiet）：

我在互联网上找到了以下图片，其中内部主体是透明的，边框是渐变。

获得此类边框有多种技巧，但这些技巧不支持::after。

Answer 1

支持现代浏览器（除了IE之外的所有主要浏览器）以及仅限于您可以实现的颜色的可能性是使用混合混合模式，这可以使灰色看起来像透明。

另外，一些特殊的属性来获取边框，以

开头

.container {
  width: 300px;
  height: 100px;
  background-color: lightgreen;
}

.test {
  position: absolute;
  margin: 20px;
  font-size: 30px;
  border-radius: 1em;
  border: solid 12px transparent;
  width: 200px;
  background: linear-gradient(gray,gray), linear-gradient(to right, red, blue);
  background-clip: content-box, border-box;
  background-origin: border-box;
  mix-blend-mode: hard-light;
}

<div class="container">
<div class="test">TEST</div>
</div>