PIEを使って、前回のエントリーで出来た角丸に影を追加してみます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="borderRadiusShadow">
4pxの角丸＋影
</p>
</body>
</html>
style.css
@charset "utf-8";
p {
width: 200px;
padding: 20px;
text-align: center;
font-family: sans-serif;
}
.borderRadiusShadow {
width: 200px;
text-align: center;
background-color: #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 4px 4px 4px #000;
-moz-box-shadow: 4px 4px 4px #000;
-webkit-box-shadow: 4px 4px 4px #000;
behavior: url(PIE.htc);
}
実行結果
Safari
IE6
0 件のコメント:
コメントを投稿