CSS圈子邊框？

Question

我想知道如何在CSS中有一個圓形或點的邊框（不是方形點，border: white dotted 2px; < - 我不想要這個）？

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/