block要素の角丸を表現する方法一覧
border-radiusを使ってblock要素のコーナーを丸くする方法のまとめ
四隅の一括指定、各角の部分指定、さらに各角の縦横それぞれの大きさを細かく指定する事ができる。
一括して角丸を指定(正円の作り方)
widthとheithの値が同数である事が条件
ひと角ずつ指定(楕円形のr)
ひとつの角に対し半径(r)のx軸y軸を個別に異なる値を与える。
『/』前の数値がx軸・『/』後の数値がy軸 = x軸とy軸の値は『/』で区切る
解説
以下の通り省略可能
コード | 各所の適用場所 |
---|---|
border-radius:A; | A=全ての角・全てのx軸y軸 |
border-radius:A B; | A=左上と右下 |
B=右上と左下 | |
border-radius:A B C; | A=左上 |
B=右上と左下 | |
C=右下 | |
border-radius:A B C D; | A=左上 |
B=右上 | |
C=右下 | |
D=左下 | |
border-radius:Ax / Ay; | Ax=全ての角のx軸全て |
Ay=全ての角のy軸全て | |
border-radius:Ax Bx / Ay By; | Ax=左上と右下のx軸 |
Bx=右上と左下のx軸 | |
Ay=左上と右下のy軸 | |
By=右上と左下のy軸 | |
border-radius:Ax Bx Cx / Ay By Cy; | Ax=左上のx軸 |
Bx=右上と左下のx軸 | |
Cx=右下のx軸 | |
Ay=左上のy軸 | |
By=右上と左下のy軸 | |
Cy=右下のy軸 | |
border-radius:Ax Bx Cx Dx / Ay By Cy Dy; | Ax=左上のx軸 |
Bx=右上のx軸 | |
Cx=右下のx軸 | |
Dx=左下のx軸 | |
Ax=左上のy軸 | |
By=右上のy軸 | |
Cy=右下のy軸 | |
Dy=左下のy軸 |
この記事へのコメント