css - HR线到边界线

This question already has answers here:

change the linear value of gradient hr
                                
                                    （1个答案）
                                
                        
                        
                            Using CSS alone, how can you have a Border-bottom gradient from Right to Left?
                                
                                    （2个答案）
                                
                        
                                去年关闭。
            
                    
我的<hr>线条的线性渐变样式已不再使用。相反，我必须通过应该以相同方式设置样式的底部边框来解决它。我知道也可以使用线性渐变来设置边框的样式，但是，我无法使其正常工作。

我将以下代码应用于<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);
}

有人可以帮我把它翻译成底部边框吗？

我将不胜感激任何帮助！

非常感谢
大卫

最佳答案

这是一个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;
}

关于css - HR线到边界线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48130955/