yomotsuはまろぐ

CSS3PIE効かないとき

CSS3PIE の css3-container はデフォルトで z-index:-1 だから場合によっては祖先要素の背景より裏に表示されることになり、角丸や背景部分が表示されないことがある。解決するためには、behavior 適用時に合わせて relative を明示しておく必要あり。

たとえば、htmlとbodyの両方に背景を適用している場合が該当。

あとでブログとかに…するかもね

html{background:red;}
body{background:blue;}
div{
	width:400px;
	height:200px;
	border:6px solid #090;
	border-radius:30px;
	-pie-background:         linear-gradient(#fff, #0F3);
	background-image:        linear-gradient(#fff, #0F3);
	behavior: url(PIE.htc);
}

これで角丸とか背景が出ないなら↓

html{background:red;}
body{background:blue;}div{
	position:relative;
	width:400px;
	height:200px;
	border:6px solid #090;
	border-radius:30px;
	-pie-background:         linear-gradient(#fff, #0F3);
	background-image:        linear-gradient(#fff, #0F3);
	behavior: url(PIE.htc);
}