ページ

▼

2012年1月4日水曜日

IE6で角丸にして影をつける

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 件のコメント:

コメントを投稿