具有线性渐变的边框颜色答案

【问题标题】：border-color with linear-gradient具有线性渐变的边框颜色
【发布时间】：2020-04-05 17:29:13
【问题描述】：

<hr class="instagram">

我正在尝试使用带有<hr> 标签的线性渐变来为线条着色。这是一个有效的动作吗？如果没有，我怎么能做到这一点？

.instagram {
  color: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* Not Working */
  border-width: medium;
  border-style: solid;
  margin-block-start: 0px;
  margin-block-end: 0px;
  border-radius: 10px;
  border-radius: 10px 10px 0px 0px;
}

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

线性渐变使用height 和background-image 代替边框。

.instagram {
  background-image: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  border-radius: 10px 10px 0px 0px;
  height: 5px;
}

&lt;hr class="instagram"&gt;

【讨论】：

【解决方案2】：

尝试添加background 而不是color 和height：

 background: linear-gradient(to right, red, yellow);
 height: 5px;

根据这篇文章的推荐How do you give a <hr> a gradient color?

【讨论】：

【解决方案3】：

我看到你的 hr 没有任何高度 - 并且可能将颜色更改为背景。我还添加了不同的浏览器支持。试试这个：

.instagram {
  height: 1px;
  border-radius: 10px 10px 0px 0px;
background: hsl(37, 97%, 70%); /* not all browsers support gradients */ 
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) /* standard syntax */ 
  background: -webkit-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)); /* For Firefox 3.6 to 15 */ 
}

【讨论】：

【解决方案4】：

另一种方法：

.instagram {
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%)) border-box;
  border: medium solid transparent;
  border-radius: 10px 10px 0px 0px;
  margin: 0;
}

&lt;hr class="instagram"&gt;

【讨论】：