Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 角丸をつける

今回は、CSS3で枠線に角丸をつける方法について書きます。


f:id:gupuru:20140307221954p:plain


角丸をつけるには「border-radiusというものを使います。

このように使います。

	border-radius: 20px;

「ピクセル」で指定する以外に、「%」で指定する方法もあります。

	border-radius: 50%;


具体的な使い方を書いています。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>css3</title>
	<style>
	 div {
	 	width: 200px;
	 	height: 200px;
	 	background-color: green;
	 	border: 5px solid red;
	 	border-radius: 20px;
	 }

	</style>
</head>
<body>
	<div id="maru">角丸</div>
</body>
</html>

実行結果
f:id:gupuru:20140307221954p:plain

ちなみに、「border-radius: 50%;」とすると円になります。
f:id:gupuru:20140307222603p:plain


さらに、「background-image」を指定すると、背景に画像を切り抜く事ができます。

                width: 200px;
	 	height: 200px;
	 	background-color: green;
	 	border: 5px solid red;
	 	border-radius: 50%;
	 	background-image: url('photo.jpg');

f:id:gupuru:20140307223013p:plain



ここからは、もう少し詳しく「border-radius」について書きます。

「border-radius」は、それぞれの角を別々に指定することができます。

border-radius: 100px 25px 50px 50px ;

f:id:gupuru:20140307223508p:plain
左上から時計回りに指定できます。(左上100px,右上25px,右下50px,左下50px)


「border-top-left-radius(左上)」,「border-top-right-radius(右上)」,「border-bottom-left-radius(左下)」,「border-bottom-right-radius(右下)」と指定すると、個別に角度をいじれます。

                width: 200px;
	 	height: 200px;
	 	background-color: green;
	 	border: 5px solid red;
	 	border-top-left-radius: 50px;

f:id:gupuru:20140307224143p:plain


参考サイト
border-radius-CSS3リファレンス