15

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

有什么方法可以强制跨浏览器无缝渲染圆点？

参考测试

4

4 回答 4

27

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

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

结果快照

SVG 虚线圆形边框

演示

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

于 2012-07-01T10:00:43.333 回答
4

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

#nav ul .current_page_item a:after {
    font-family: 'FontAwesome';
    content: "\f111  \f111  \f111";
    font-size: 6px;
    display: block;
}
于 2014-07-18T01:14:57.283 回答
3

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

于 2012-07-01T08:55:35.343 回答
0

基于ozbassplayer 的解决方案（谢谢）。

如何在sass中使用来生成更长的线条而不需要计算点。

唯一发现的缺点是当线条不是“理想”长时切割点。

  &:after {
    font-family: 'FontAwesome';  
    display: block;  
    font-size: 6px;  

  
    letter-spacing: 3px;      // to adjust space between dots
    white-space: nowrap;      // force to keep in one line  
    overflow: hidden;         // avoid rendering dots out of container
    width: 100%;

    $content: ' ';
    @for $i from 1 through 50 {
      $content: $content + " \f111";
    }

    content: $content;
  }
于 2021-12-06T09:21:50.130 回答