如何在WebKit浏览器中创建带圆点的虚线边框？

Question

在WebKit驱动的浏览器中，例如Safari，Chrome与其声明为dotted的样式的边框呈现方形点而不是圆形。

有没有办法强制在浏览器中无缝渲染圆点？

参考测试

• on jsFiddle

Answer 1

目前缺少本地支持的解决方案，如the specification does not define these properties explicitly，并将其留给浏览器实现。

但是，您可以使用SVG创建边框，因为它可以完全控制您所追求的特性。

绘制一条线，而不是定义其stroke-dasharray和stroke-linecap属性以达到预期的效果。

示例代码段

<line 
    x1="40" x2="260" 
    y1="100" y2="100" 
    stroke="#5184AF" 
    stroke-width="20" 
    stroke-linecap="round" 
    stroke-dasharray=".001, 30" />

结果快照

演示

• http://jsfiddle.net/eliranmal/hsfxS/

参考资料（在Mozilla开发者网络上）

• stroke-dasharray
• stroke-linecap

Answer 2

border-image是可能的：http://www.css3.info/preview/border-image/

Answer 3

我也有这个问题，但我的菜单项下只需要三个圆点。 所以我只是使用了一个糟糕的黑客，但它有效： 首先，我使用@import连接FontAwesome 然后在CSS中添加圆点字符作为内容：

#nav ul .current_page_item a:after {
    font-family: 'FontAwesome';
    content: "\f111  \f111  \f111";
    font-size: 6px;
    display: block;
}