スポンサード

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 の値と画像の幅、高さの値を同じにしています。
※親要素にも画像と同じ（か、それ以上）の幅や高さを指定しておかないと、レイアウトが崩れる場合があります。

スポンサード