Question

我有<hr>线条样式，线性渐变，我不能再使用了。相反，我必须通过底部边框解决它，应该以相同的方式设置样式。我知道边框也可以使用线性渐变来设置样式，但是，我无法使其工作。

我将以下代码应用于hr.mydivider { border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); }：

＆＃13;

enumerate

＆＃13;

有人可以帮我翻译到底部边框吗？

我非常感谢任何帮助！

非常感谢大卫

Answer 1

这是一个JSFiddle，它显示应用于div的底部边框。它不需要高度。我给JSFiddle示例提供了40px的高度，以表明它只应用于下边界。

HTML：

<div class="mydivider"></div>

<强> CSS：

.mydivider {
    border: none;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    -webkit-border-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    -moz-border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    border-image-slice: 1;
}

HR线到边界线

1 个答案: