css - CSS サークル ボーダー?

Question

CSSで円またはドット（四角いドットではなく、border: white dotted 2px;<-これは必要ありません）の境界線を作成する方法を知りたいですか？

Answer 1

編集：

IE10 以下ではpolyfillが必要であることを理解したうえで、CSS3 border-imageを使用することをお勧めします。

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