Html 如何在 WebKit 浏览器中创建带圆点的虚线边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11280676/
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 create dotted border with round dots in WebKit browsers?
提问by qualle
In WebKit driven browsers, e.g. Safari, Chrome, borders with their style declared as dottedare rendered with square dots instead of round.
在 WebKit 驱动的浏览器中，例如 Safari、Chrome，其样式声明为dotted用方点而不是圆形呈现的边框。
Is there any way to force rendering of round dots seamlessly across browsers?
有没有办法强制跨浏览器无缝渲染圆点？
Reference Test
参考测试
回答by Eliran Malka
A natively supported solution is currently lacking, as the specification does not define these properties explicitly, and leaves it for the browser's implementation.
目前缺乏本机支持的解决方案，因为规范没有明确定义这些属性，并将其留给浏览器的实现。
You may, however, use SVG to create the border, as it offers full control over the characteristics you're after.
但是，您可以使用 SVG 来创建边框，因为它可以完全控制您所追求的特征。
Draw a line, than define its stroke-dasharrayand stroke-linecapattributes to achieve the desired effect.
画一条线，然后定义它的stroke-dasharray和stroke-linecap属性来达到预期的效果。
Example Code Snippet
示例代码片段
<line
x1="40" x2="260"
y1="100" y2="100"
stroke="#5184AF"
stroke-width="20"
stroke-linecap="round"
stroke-dasharray=".001, 30" />
Result Snapshot
结果快照
Demo
演示
References (on Mozilla Developer Network)
参考资料（在 Mozilla 开发者网络上）
回答by Max Girkens
border-imagewould be a possibility: http://www.css3.info/preview/border-image/
border-image将是一种可能性：http: //www.css3.info/preview/border-image/
回答by ozbassplayer
I also had this problem but I only needed three round dots under my menu item. So I just used a terrible hack, but it worked: First of all I hooked in FontAwesome using @import Then added the round dot characters as content in the CSS:
我也有这个问题，但我的菜单项下只需要三个圆点。所以我只是使用了一个可怕的 hack，但它奏效了：首先，我使用 @import 连接到 FontAwesome 然后在 CSS 中添加圆点字符作为内容：
#nav ul .current_page_item a:after {
font-family: 'FontAwesome';
content: "\f111 \f111 \f111";
font-size: 6px;
display: block;
}
