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

Question

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

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

参考测试

• 在jsFiddle上

Answer 1

目前缺乏本机支持的解决方案,因为规范没有明确定义这些属性,而是将其留给浏览器实现.

但是,您可以使用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/