border-radiusで角を丸くしてみよう!角丸プロパティの使い方


ぎw




可愛すぎるプロパティ、「border-radius」。

背景や画像の角を丸くしたいときに使います。
世間では「角丸」なんて呼ばれて可愛がられていますが、とくに画像編集などを使わなくともCSSで簡単に実装できるのは嬉しい限り。



border-radius」、最高です。


角丸のサンプル画像
例えば↑背景の角を丸めたり、

左記のような写真や画像を丸めたいときに使います。

どの程度丸めるのかは自由に調節でき、丸めすぎると、↓丸になります。





もう想像しただけでこの便利さが伝わるはず。

当ブログのフッターでも使っていますが、どう考えても神がかっています。


では使い方。


border-radiusで角の丸さを指定


HTMLのstyle属性、あるいはCSSにborder-radius: ;を記述します。
そして20px、20%などの単位で丸さを調節。


コードの例
■画像を丸くする
<img border="0" height="400" src="画像のURL" style="border-radius: 40px;" width="266" />

■背景の角を丸くする
<div style="background-color: #cccccc; border-radius: 20px; font-size: 30px; padding: 20px;">
border-radius: px、em、%などで調節 ;
</div>

■一部の角を丸くする
<div style="background-color: yellow; border-top-right-radius: 20px; font-size: 20px; padding: 20px;">
右上 border-top-right-radius<br />
左上 border-top-left-radius<br />
右下 border-bottom-right-radius<br />
左下 border-bottom-left-radius
</div>

■完全な丸にする
<div style="background-color: lime; border-radius: 100%; height: 100px;  width: 100px;">
</div>

■表の角を丸くする
<table width="400" bgcolor="white" style="border:2px solid gray;border-radius: 10px;" cellspacing="0" cellpadding="10"><tbody><tr>
<td width="200" style="border-right:2px solid #cccccc;">
りんごの値段
</td>
<td width="200">
100円
</td>
</tr>
<tr>
<td width="200" style="border-top:2px solid #cccccc;border-right:2px solid #cccccc">
みかんの値段
</td>
<td width="200" style="border-top:2px solid #cccccc;">
200円
</td>
</tr>
<tr>
<td width="200" style="border-top:2px solid #cccccc;border-right:2px solid #cccccc">
メロンの値段
</td>
<td width="200" style="border-top:2px solid #cccccc;">
1,000円
</td>
</tr></tbody></table>

表示サンプル
■画像を丸くする


■背景の角を丸くする
border-radius: px、em、%などで調節 ;

■一部の角を丸くする
右上 border-top-right-radius
左上 border-top-left-radius
右下 border-bottom-right-radius
左下 border-bottom-left-radius

■完全な丸にする

■表の角を丸くする
りんごの値段 100円
みかんの値段 200円
メロンの値段 1,000円

FC2ブログで使うには?


FC2ブログでは、古いテンプレートの場合はborder-radiusが使えないケースがあります。その場合、テンプレートの互換モードをIE9にします。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

FC2ブログのテンプレートを開き、上記のmetaタグを<head>内に追記しましょう。


Sponsored Link

Sponsored Link

0 件のコメント :

コメントを投稿