Как вы даете <hr>цвет градиента?

Question

У меня на странице html есть горизонтальное правило с применением следующего стиля:

#seperate {
    clear: both;
    border: 3px solid red;
}

Можно ли сделать цвет горизонтального правила градиентом, похожим на:

background: linear-gradient(to right, red , yellow)

Я пытался сделать это ..

#seperate {
clear: both;
border: 3px solid linear-gradient(to right, red , yellow);
}

.. но это не удалось.

Answer 1

Да, просто укажите высоту hr

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

<hr/>

Answer 2

Пожалуйста, добавьте ниже CSS

#seperate {
  height: 3px;
  background: red; /* For browsers that do not support gradients */ 
  background: -webkit-linear-gradient(to right, red , yellow); /*For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to right, red, yellow); /* For Opera 11.1 to 12.0 */ 
  background: -moz-linear-gradient(to right, red, yellow); /* For Firefox 3.6 to 15 */ 
 background: linear-gradient(to right, red , yellow); /* Standard syntax */ }
}

Пожалуйста, проверьте ссылку Fiddle https://jsfiddle.net/pqrudt6j/

Answer 3

Вот ваш градиент

body{
  padding:20px;
}

.hr1 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

<hr class="hr1" />