CSSでのブロックの境界線の角丸め
今、ブロックの角を丸める方法を学びます。
これには、ピクセル単位で値を取る
プロパティborder-radiusを
適用します。
例えば、10pxで角丸を指定した
場合、それは何を意味するのでしょうか?これは、
その角丸に内接することができる円の
半径です。もし数学が苦手で最後の文が
理解できない場合は、それを忘れて
単に目で角丸を調整してください。
ある程度の経験があれば、問題なく行えます(角丸を
測定する計測ツールは存在しません、
少なくとも私は聞いたことがありません)。
角丸を10pxに設定して、
ブロックの角を丸めてみましょう:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
以下のサンプルに従ってページを作成してください: