如何用css画一条虚线？

如何使用CSS绘制虚线？

例如：

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

另见的样式<hr>与CSS。

<style>
    .dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />

使用HTML：

<div class="horizontal_dotted_line"></div>

并在styles.css中：

.horizontal_dotted_line{
  border-bottom: 1px dotted [color];
  width: [put your width here]px;
} 

公认的答案有很多不足之处，现代浏览器不再需要。我已经在IE8之前的所有浏览器上亲自测试了以下CSS，它运行完美。

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

border: none必须排在最前面，以删除浏览器应用于hr标记的所有默认边框样式。

您是说“边界：1像素点黑”吗？

w3schools.com参考

这行应该为您工作：

<hr style="border-top: 2px dotted black"/>

.myclass {
    border-bottom: thin red dotted;
}

我在这里尝试了所有解决方案，但是没有一个干净的1px线。为此，请执行以下操作：

border: none; border-top: 1px dotted #000;

或者：

 border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;

像这样使用：

<hr style="border-bottom:dotted" />

为此，您只需要将border-top或添加border-bottom到<hr/>标签中，如下所示：

<hr style="border-top: 2px dotted navy" />

您想要的任何线型或颜色

将以下属性添加到要具有虚线的元素。

style="border-bottom: 1px dotted #ff0000;"

使用hr为我创建了两行，一条实线，一条虚线。

我发现这很好用：

div {
border-top: 1px dotted #cccccc;
color: #ffffff;
background-color: #ffffff;
height: 1px;
width: 95%;
}

另外，因为您可以将宽度设置为百分比，所以宽度总是在两侧都有（即使您调整窗口大小）。

尝试破折号...

<hr style="border-top: 2px dashed black;color:transparent;"/>

元素后的虚线：

http://jsfiddle.net/korigan/ubtkc17e/

的HTML

<h2 class="dotted-line">Lorem ipsum</h2>

的CSS

.dotted-line {
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.dotted-line:after {
  content: "..........................................................................................................";
  letter-spacing: 6px;
  font-size: 30px;
  color: #9cbfdb;
  display: inline-block;
  vertical-align: 3px;
  padding-left: 10px;
}