ほんっとにはじめてのHTML5とCSS3
CSS3 PIE サンプル

「CSS3 PIE」で、IE 6〜8 にも CSS3の機能を使えるようにしよう

ボックスの角丸のサンプル

border-radius

CSSはこちら

div.radius {
	text-align: center;
	height: 100px;
	width: 300px;
	border: 1px solid #999;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #FFC;
	behavior: url(/samples/samplepie-set/PIE.htc);
	position: relative;
}

ボックスシャドウのサンプル

box-shadow

CSSはこちら

div.shadow {
	background: #FFC;
	text-align: center;
	height: 100px;
	width: 300px;
	-webkit-box-shadow: 15px 15px 10px #999;
	-moz-box-shadow: 15px 15px 10px #999;
	box-shadow: 15px 15px 10px #999;
	behavior: url(/samples/samplepie-set/PIE.htc);
	position: relative;
}

線形グラデーションのサンプル

linear-gradient

CSSはこちら

div.gradient {
	text-align: center;
	height: 100px;
	width: 300px;
	background: -moz-linear-gradient(top, #FF9, #9C0);
	background: -webkit-gradient(linear, left top, left bottom, from(#FF9), to(#9C0));
	background: -o-linear-gradient(top, #FF9, #9C0);
	background: linear-gradient(top, #FF9, #9C0);
	-pie-background: linear-gradient(top, #FF9, #9C0);
	behavior: url(/samples/samplepie-set/PIE.htc);
	position: relative;
}