gist

2012年1月3日火曜日

IEで角丸にする

IE6でもCSS3で角丸にするには、PIE.htcを使うと上手いことやってくれます。PIE-1.0beta5.zipをダウンロードします。解凍後のPIE.htcを使います。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <p class="borderRadius">
    4pxの角丸
    </p>
</body>
</html>

style.css

@charset "utf-8";

p {
   width: 200px;
   padding: 20px;
   text-align: center;
   font-family: sans-serif;
}   
    
.borderRadius {
    background-color: #ccc;    
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    behavior: url(PIE.htc);
}

実行結果

Safari

IE6

0 件のコメント: