「border-radius」を使用して円を作成する

Question

私はHTMLとCSSをJon Duckettが読んでおり、border-radiusプロパティに導入されています。

以下のコードを使用して円を作成しようとしていますが、円は完璧ではありません。私は50pxの半径を使用していますが、完全ではありません。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
}

<p class="three"></p>

私が間違って何をしているのですか？

Answer 1

paddingとborderの幅は、あなたの要素のwidthとheightに加えて計算されます。

あなたはこれを解決するためのさまざまなオプションがあります：

1. は、サイズの計算に含めるべきかを定義するあなたの要素にbox-sizing: border-boxを追加
2. 使用をborder-radius: 50%
3. あなたborder-radiusにあなたの境界線幅とパディングを追加。ここで

だけthis article from MDNでCSSボックスモデルの外観についてのより詳細な説明についてはbox-sizing

p { 
 
    display: inline-block; 
 

 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 

 
    /* these values get added to your 100px by default */ 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    
 
    /* now width and height determine how big your 
 
    element is as a whole */ 
 
    box-sizing: border-box; 
 
}

<p class="three"></p>

とソリューション。

Answer 2

50%である必要があります。50pxではありません。 50%は、要素のサイズに関係なく常に円を描きます。ピクセル値を設定すると、要素が十分に小さい場合にのみ円が描画されます。

以下を参照してください。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

Answer 3

境界線幅から来る幅を考慮していないのは、両端にそれぞれ5pxです。合計幅は110pxなので、ボーダー半径は55pxである必要があります。完全な円の簡単な方法は、border-radiusを50%に設定することです。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

Answer 4

あなただけborder-radiusプロパティに50%を追加する必要があります。以下はスニペットであり、あなたは完全な円であることがわかります。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

Answer 5

さらに別のオプションは、（私はほぼすべての要素のように）border-boxにあなたの要素のbox-sizingプロパティを設定することです。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    box-sizing: border-box; /* < -------------------- here */ 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
}

<p class="three"></p>

Border-box数学を行う際に考慮境界にとり、ボード全体に適用した場合に、一般的なレイアウトとスタイリングを簡素化します。ブートストラップdo this for youのようなライブラリ。