1

純粋に CSS を使用して同心円の束を作成しようとしています。これが私のCSSです：

.inner-circle{
height: inherit;
width: inherit;
background: #FFF;
border: 1px solid #1a1a1a;
border-radius: 50%;
padding: 5px;
margin: 1%;

}

これまでの私の試みはここにあります: http://jsfiddle.net/4yL2m/

ただし、リンクでわかるように、キャンバス領域の幅と高さに応じて楕円しか作成できません。同じ div をネストして完全な同心円を描く方法を誰かが提案できますか?

4

5 に答える 5

6

最も外側の円の正確な寸法 (幅/高さが等しい) を指定する方法がわかりません。独自のクラスを与えることができます

<div class="inner-two container">
.container {
    width: 100px;
    height: 100px;
    margin: 1%;
}

box-sizing: border-box内側の円は、境界線/パディングが寸法に含まれるため、 設定されている場合、境界線/パディングと同心円になります。marginこれには含まれないため、望ましくありません。も指定する必要がありますheight: 100%。

http://jsfiddle.net/4yL2m/8/

含まれる div も円 div の 1 つである必要はないことに注意してください。それはただすることができます。

-moz-box-sizing: border-box;Firefox で使用するには、 と同様に設定する必要があることに注意してくださいboxing-sizing: border-box;。

于 2013-05-21T20:13:27.273 に答える
0

追加するだけです：

display: table-cell;
text-align: center;
vertical-align: middle;
于 2013-11-23T05:53:15.690 に答える
0

基本的にアスペクト比は1:1に固定する必要があります。Webkitaspect-ratioブラウザーが認識する CSS 属性があるようですが、クロスプラットフォームでは機能しません。クロスブラウザーの回避策など、詳細については、この質問を参照してください。

于 2013-05-21T20:10:28.013 に答える