CSS：渐变边框+边框半径答案

【问题标题】：CSS: gardient border + border-radiusCSS：渐变边框+边框半径
【发布时间】：2018-01-10 17:59:38
【问题描述】：

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

我创建了一个带有::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;
}

看起来像：

问题是内部元素应该是透明的。如果button 的background-color 属性设置为transparent，则按钮采用::after 元素的颜色（gardiet）：

我在网上找到下面这张图，里面的主体是透明的，边框是渐变的。

有多种技巧可以获得这样的边框，但这些技巧不支持border-radius。

【问题讨论】：

“我在网上找到了以下图片” – 是的，是吗？据我们所知，这可能是在图形程序中绘制的实际图像，而不是 HTML/CSS。那么这对这个问题有什么帮助……？
可能的解决方案可能是使用 SVG——要么直接在 SVG 中绘制边框，要么使用 SVG 过滤器“剪掉”内部按钮部分。

标签： css

【解决方案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>

【讨论】：