html - 如何在 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