<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;
}
答案 0 :(得分:2)
使用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">
答案 1 :(得分:1)
尝试添加background
而不是color
和height
:
background: linear-gradient(to right, red, yellow);
height: 5px;
答案 2 :(得分:0)
我看到您的小时没有任何高度-也许将颜色更改为背景。我还添加了其他浏览器支持。试试这个:
.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 */
}
答案 3 :(得分:0)
另一种方法:
.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">