如何用CSS画一条虚线？

我怎样才能用CSS画一条虚线？

Answer 1

例如：

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

另请参见使用CSSdevise<hr> 。

Answer 2

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

Answer 3

使用Googlesearch“css dotted lines” 在这里find答案：

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

和styles.css中：

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

Answer 4

接受的答案有很多现代浏览器不再需要的东西。 我已经亲自在所有的浏览器上testing了以下CSS，早在IE8中，它完美的工作。

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

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

Answer 5

你的意思是像“边界：1px虚线黑色”？

w3schools.com参考

Answer 6

这一行应该为你工作：

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

Answer 7

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

Answer 8

我在这里尝试了所有的解决scheme，没有给出一个干净的1px行。 为了达到这个目的，

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

或者：

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

Answer 9

像这样使用：

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

Answer 10

要做到这一点，您只需简单地在您的<hr/>标记中添加border-top或border-bottom ，如下所示：

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

与任何线型或颜色你想要的

Answer 11

添加以下属性到你想要有虚线的元素。

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

Answer 12

使用hr为我创build了两行，一个是固体，另一个是虚线。

我发现这工作得很好：

 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

在元素之后冒风行：

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