境界半径を使用した形状デザイン

要素の境界線と境界線の半径を調整することで、さまざまな形状を形成することができます。

丸いボックス

1px から始まって Radius プロパティまで増加する値を使用すると、角丸の長方形が作成されます。

半径のピクセル値を大きくしていくと、徐々にカプセルのような形状になっていきます。

カプセル/錠剤の形状

カプセル形状の半径は、要素の高さまたは幅の値（ピクセル単位）の半分です。値をさらに増やしても形状は変わりません。

楕円

半径にはパーセンテージ値を使用できます。半径が 50% の場合、楕円が滑らかにレンダリングされます。値を大きくしても形状には影響しません。

楕円の形状は要素の幅に直接関連しています。楕円のアスペクト比は、幅と高さの比率によって決まります。

丸

円は、基本的に幅と高さが等しい楕円です。円を作成するには、幅と高さの測定値が同じ要素に半径 50% を適用します。

ダイナミックコーナー

他の要素と同様に、さまざまな状態に合わせて境界の半径をカスタマイズできます。

1. アクセス ホバー 述べて導入する 境界半径
2. デフォルトに切り替える なし 述べて適用する 遷移 に 境界半径 プロパティ。持続時間と緩和を調整または維持する

要素の状態と遷移に関する追加情報を調べる.