将渐变应用于轮廓

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;
}

Answer 2

您只需将2-spaces设置为渐变即可。在这种情况下，例如：

border-image

https://css-tricks.com/examples/GradientBorder/

Answer 3

＆＃13;

＆＃13;

<div class="top-to-bottom"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>

＆＃13;

directives

＆＃13;

＆＃13;

＆＃13;