设置点状<hr>标签时底部出现灰色实线的问题求助

嘿，Maya！我一眼就看出问题出在哪啦——浏览器给<hr>标签自带了默认样式，你只设置了border-top，但它的其他边框（比如border-bottom、border-left、border-right）还保留着默认的灰色实线样式没被覆盖掉呢！

解决方法超简单，给你两种可行的写法，选哪种都能搞定：

方法一：清空多余的默认边框 #

修改你的.dotted类CSS代码：

hr.dotted {
  border-top: 3px dotted #FFF;
  /* 清空其他方向的默认灰色边框 */
  border-right: none;
  border-bottom: none;
  border-left: none;
}

方法二：直接重置整个border属性（更简洁） #

这种写法一步到位，先把整个border清零再设置你要的点状上边框：

hr.dotted {
  border: none;
  border-top: 3px dotted #FFF;
}

为啥会出现这种情况呢？其实是浏览器的用户代理样式表给<hr>默认加了类似border: inset 2px的样式（不同浏览器细节可能有点不一样），你只修改border-top的话，其他三个方向的边框还是会显示默认的灰色实线，就造成了“点状线叠在灰色实线上”的视觉效果。

另外给你个小tip：要是觉得分隔线的位置或者粗细不对，还可以调整下<hr>的默认height和margin，让它更贴合你的页面设计~

内容来源于stack exchange