• RSS

[CSS]CSS3 の border-radius で要素や画像で円形に表示する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

CSS3 の border-radius は要素を角丸にすることができる便利なプロパティで、
角丸の値を調整することで、画像や要素を正円(円形)で表示することもできます。

IE 7以下でも利用したい場合は(試していませんが)、PIE などを使えば実現可能かと思います。

要素を正円で表示する

まずは最初に、まんまるのオブジェクトをHTML と CSS で表現します。

HTML の記述例

circle という名前の要素を用意します。
<div class="circle"></div>


CSS の記述例

CSS3 の border-radius を利用して circle の要素を円にしてみます。

.circle{
	width:100px;
	height:100px;
	background:#cc0000;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
}
ポイントは、border-radius の値と circle の要素の幅、高さの値を同じにすることです。

↓このような感じで表示されます。



画像を円形で(マスク)表示する

上記例の応用として、今度は img タグの画像を円形で表示(マスク)します。

HTML の記述例

img タグを div で囲います。
<div class="circle2">
<img src="sample.jpg" />
</div>


CSS の記述例

CSS3 の border-radius を利用して、画像を正円でマスクします。

.circle2	{
	width:256px;
	height:256px;
}

.circle2 img {
	width:256px;
	height:256px;
	border-radius: 256px;
	-webkit-border-radius: 256px;
	-moz-border-radius: 256px;
}
↓こちらも先の例と同様 border-radius の値と画像の幅、高さの値を同じにしています。
※親要素にも画像と同じ(か、それ以上)の幅や高さを指定しておかないと、レイアウトが崩れる場合があります。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください