角丸の画像はいらないんだ(*^◯^*)
ってなわけで今まで角丸を使う時は背景画像とかでやっておりましたが
もうそれもいらなくなるのですね。っていうお話です。
border-radius
レイディアス。角丸にしてあげるデース!
四方の角をいっぺんに指定する方法となります。
borderとかと同じ感覚デスね。
その前に、どうやって角丸の大きさを決めているのか
丸があるとして、その丸の中心から、X軸とY軸を指定(半円分ね)すると
円は楕円になったりしますよね。X軸:20px Y軸:40pxにしたりすると、縦長の円になります。
ここまでは想像できますか?
その円の外周にそって、要素の外側がぐにゃりと曲がって行く、そんな感じなのです。
指定方法は?
と言うわけで指定方法はこんな感じです。
border-radius:左上X軸 右上X軸 右下X軸 左下X軸 / 左上Y軸 右上Y軸 右下Y軸 左下Y軸
ながい
ちなみにmarginと同じくある程度省略することもできますので
合わせて例を作って行こうと思います。
通常の全方向指定
border-radius:10px 40px 60px 13px / 10px 20px 30px 40px;
全共通指定方法
border-radius:10px / 10px;
左上右下 左下右上の2グループ
border-radius:10px 50px / 10px 50px; /* border-radius:左上右下のX軸 左下右上のX軸 / 左上右下のY軸 左下右上のY軸; ということになります。 */
左上 右下 左下右上の3グループ
border-radius:10px 50px 90px / 10px 50px 90px; /* border-radius:左上のX軸 左下右上のX軸 右下のX軸 / 左上のY軸 左下右上のY軸 右下のY軸 ; ということになります。 */
個別に指定
ここの角だけ丸くしたいんじゃぁって時の為に(あるのか?)
個別の指定方法も存在しています。
値の指定方法
全体の指定では、X軸とY軸がスラッシュで区切られていましたが
今回は半角スペースで区切られるようになります。
また、値を一つだけにすると、X軸とY軸の値は同じと判定されます。
左上だけ
border-top-left-radius:20px 20px;
右上だけ
border-top-right-radius:20px 20px;
左下だけ
border-bottom-left-radius:20px 20px;
右下だけ
border-bottom-right-radius:20px 20px;
値の指定方法
例ではpxを使っていましたが、emも行けます
まぁ、emはピンと来ないので僕は使いにくいんじゃないかって思ってたりします。
後はパーセントの指定があったりします。
この辺はお好みで使い分けるといいんじゃないかなぁなんて思ったりしました。