具有線性漸變的邊框顏色

Question

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

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

 <hr class="instagram">

Answer 2

嘗試添加background而不是color和height ：

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

正如這篇文章所推薦的， 你如何給 <hr> 一個漸變色？

Answer 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 */ 
}

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

 <hr class="instagram">