CSS Circle Border？

Question

我想知道如何在CSS中设置一个圆圈或点的边框（不是平方点，border: white dotted 2px;＆lt; - 我不想要这个？）

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属性border-image：

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