Html 如何用css绘制虚线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1746491/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a dotted line with css?
提问by Kaveh
How can I draw a dotted line with CSS?
如何使用 CSS 绘制虚线？
回答by Sinan ünür
For example:
例如：
hr {
border:none;
border-top:1px dotted #f00;
color:#fff;
background-color:#fff;
height:1px;
width:50%;
}
See also Styling <hr>with CSS.
另见的样式<hr>与CSS。
回答by rahul
<style>
.dotted {border: 1px dotted #ff0000; border-style: none none dotted; color: #fff; background-color: #fff; }
</style>
<hr class='dotted' />
回答by Brendan Long
Using HTML:
使用 HTML：
<div class="horizontal_dotted_line"></div>
<div class="horizontal_dotted_line"></div>
and in styles.css:
在styles.css中：
.horizontal_dotted_line{
border-bottom: 1px dotted [color];
width: [put your width here]px;
}
回答by coredumperror
The accepted answer has a lot of cruft that is no longer required for modern browsers. I have personally tested the following CSS on all browsers as far back as IE8, and it works perfectly.
接受的答案有很多现代浏览器不再需要的东西。我已经亲自在所有浏览器上测试了以下 CSS，最早可以追溯到 IE8，它运行良好。
hr {
border: none;
border-top: 1px dotted black;
}
border: nonemust come first, to remove all the default border styling that browsers apply to hrtags.
border: none必须首先删除浏览器应用于hr标签的所有默认边框样式。
回答by coredumperror
this line should work for you:
这条线应该适合你：
<hr style="border-top: 2px dotted black"/>
回答by ChssPly76
Do you mean something like 'border: 1px dotted black'?
您的意思是“边框：1px dotted black”吗？
回答by Graeme Perrow
.myclass {
border-bottom: thin red dotted;
}
回答by Sarfraz
Add following attribute to the element you want to have dotted line.
将以下属性添加到您想要虚线的元素。
style="border-bottom: 1px dotted #ff0000;"
回答by ???? ?????
I tried all the solutions on here and none gave a clean 1px line. To achieve this do the following:
我在这里尝试了所有解决方案，但没有一个给出干净的 1px 线。为此，请执行以下操作：
border: none; border-top: 1px dotted #000;
Alternatively:
或者：
border-top: 1px dotted #000; border-right: none; border-bottom: none; border-left: none;
回答by ???? ?????
use like this:
像这样使用：
<hr style="border-bottom:dotted" />
