如何用css画虚线？

Question

如何使用 CSS 绘制虚线？

原文由 Kaveh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

例如：

 hr {
  border: none;
  border-top: 1px dotted #f00;
  color: #fff;
  background-color: #fff;
  height: 1px;
  width: 50%;
}

 before
<hr>
after

另请参阅 样式 <hr> 使用 CSS 。

原文由 Sinan Ünür 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

接受的答案有很多现代浏览器不再需要的东西。我已经在早于 IE8 的所有浏览器上亲自测试了以下 CSS，并且它运行良好。

  hr {
    border: none;
    border-top: 1px dotted black;
  }

border: none 必须首先出现，以删除浏览器应用于 hr 标签的所有默认边框样式。

原文由 coredumperror 发布，翻译遵循 CC BY-SA 3.0 许可协议