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

时间:2012-07-01 08:48:43

标签: html css webkit border

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

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

参考测试

3 个答案:

答案 0 :(得分:22)

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

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

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

示例代码段

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

结果快照

SVG dotted round border

演示

参考资料(在Mozilla开发者网络上)

答案 1 :(得分:3)

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

答案 2 :(得分:3)

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

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