如何在WebKit浏览器中创建带有圆点的虚线边框? [英] How to create dotted border with round dots in WebKit browsers?

问题描述

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

In WebKit driven browsers, e.g. Safari, Chrome, borders with their style declared as dotted are rendered with square dots instead of round.

有没有办法强制在浏览器之间无缝渲染圆点?

Is there any way to force rendering of round dots seamlessly across browsers?

• 在jsFiddle上

推荐答案

当前缺少本机支持的解决方案，例如

A natively supported solution is currently lacking, as the specification does not define these properties explicitly, and leaves it for the browser's implementation.

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

You may, however, use SVG to create the border, as it offers full control over the characteristics you're after.

画一条线，然后定义其stroke-dasharray和stroke-linecap属性以达到所需的效果.

Draw a line, than define its stroke-dasharray and stroke-linecap attributes to achieve the desired effect.

<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/

• stroke-dasharray
• stroke-linecap

这篇关于如何在WebKit浏览器中创建带有圆点的虚线边框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！