Question

如何用CSS绘制虚线？

Answer 1

例如：

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

另见Styling <hr> with CSS。

Answer 2

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

Answer 3

使用HTML：

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

和styles.css：

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

Answer 4

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

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

必须先使用

border: none，才能删除浏览器应用于hr代码的所有默认边框样式。

Answer 5

你的意思是'border：1px点缀黑色'？

w3schools.com reference

Answer 6

这一行应该适合你：

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

Answer 7

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

Answer 8

将以下属性添加到您想要虚线的元素。

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

Answer 9

我在这里尝试了所有的解决方案，并且没有给出干净的1px线。要实现此目的，请执行以下操作：

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

可替换地：

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

Answer 10

像这样使用：

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

Answer 11

要执行此操作，您只需向border-top标记添加border-bottom或<hr/>，如下所示：

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

使用您想要的任何线型或颜色

Answer 12

使用hr为我创建了两行，一行为实心，一行为点。

我发现这很有效：

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

另外，因为您可以将宽度设为百分比，所以它的任何一侧都会有一些空间（即使您调整窗口大小）。

Answer 13

尝试破灭......

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

Answer 14

元素之后的Dooted行：

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;
}

如何用css画一条虚线？

14 个答案:

HTML

CSS