css - CSS圆形边框？

Question

我想知道如何border: white dotted 2px;在 CSS 中使用圆形或圆点（不是方点，<- 我不想要这个）的边框？

Answer 1

编辑：

我建议使用CSS3 border-image并理解 IE10 及以下版本需要polyfill。

.bordered-box {
    border-style: solid;
    border-width: 27px;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    -o-border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 repeat;
    border-image: url(http://www.w3.org/TR/css3-background/border.png) 27 fill repeat;
}

原始接受的答案：

保证它在所有浏览器中显示为圆圈的唯一方法是使用图像。

这里有一个教程：http: //www.htmlgoodies.com/beyond/css/how-to-create-border-images-using-css3.html

CSS：

.dots {
    border-width: 30px;
    -webkit-border-image:url(images/dots.png) 30 repeat stretch;
    -moz-border-image:url(images/dots.png) 30 repeat stretch;
    border-image:url(images/dots.png) 30 repeat stretch;
    padding: 30px;
}

HTML：

<div class="dots"></div>

图片：

如果您需要它为 IE 工作，您也可以创建一个具有点背景的包装 div，并为内部 div 提供点的任何高度的填充。

Answer 2

它在浏览器中没有得到很好的支持，但你应该看看 css3 属性边框图像：

-moz-border-image:url(border.png) 30 30 round; /* Firefox */    
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */    
-o-border-image:url(border.png) 30 30 round; /* Opera */    
border-image:url(border.png) 30 30 round;

Answer 3

如果 CSS3 是一个选项，那么该border-image属性是您最好的选择。这是关于这个主题的教程： http: //css-tricks.com/understanding-border-image/