将渐变应用于轮廓答案

【问题标题】：Apply Gradient to an Outline将渐变应用于轮廓
【发布时间】：2017-08-11 06:49:16
【问题描述】：

如何将渐变应用于轮廓？

据我了解，可以通过边框图像对边框进行此操作，但是，我还没有找到渐变到轮廓的实现。

有可能吗？

渐变示例

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

编辑：

我有一个现有的边框（1px #000 solid），所以边框图像不起作用。

编辑#2：

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

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

【问题讨论】：

标签： css

【解决方案1】：

这是一个边框图像的工作示例。您可以检查一下并在您的代码中使用相同的技术：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;
}

【讨论】：

【解决方案2】：

.top-to-bottom { border-width: 1px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; }

&lt;div class="top-to-bottom"&gt;&lt;p&gt;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

您可以简单地将border-image 设置为您的渐变。在这种情况下，类似于：

border-width: 1px;
border-style: solid;
border-image: linear-gradient(179.98deg, rgba(104, 213, 255, 1) 0.12%, rgba(45, 179, 222, 1) 14.53%, #467EE3 99.88%);

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

【讨论】：

我应该澄清一下，我已经有一个边框（1px #000 solid）。
已更新。您也可以只添加渐变而不是 #000，但这未经测试。