css - 将渐变应用于轮廓

Question

如何将渐变应用于轮廓？

根据我的理解，可以通过 border-image 使用边框来执行此操作，但是，我还没有找到对轮廓进行渐变的实现。

这可能吗？

渐变示例

linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%);

编辑:

我有一个现有的边框(1px #000 实心)，所以 border-image 将不起作用。

编辑#2:

当前 https://jsfiddle.net/b4x0fame/ 的 jsfiddle 示例

在保持黑色边框的同时，我希望轮廓是渐变的。

Answer 1

这里是 border-image 的一个工作示例。您可以查看并在您的代码中使用相同的技术:jsfiddle

<div class='bordered'>1</div>

div {
height: 100px; width: 100px;
font-size: 50px;
line-height: 100px;
text-align: center;
margin: 10px auto;
background-clip: padding-box;
}
.bordered {
border: 20px double pink;
border-image: -webkit-linear-gradient(45deg,orange,yellow) 20 stretch;
}