画像を使わずCSSのみで丸角を表現しよう

■サンプルソース

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css">
#test {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    background-color: #00FFCC;
    width: 200px;
    padding: 50px;
}
</style>
</head>
<body>
<div id="test">
この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。
</div>
</body>

■実際の表示

対応ブラウザ（Firefox、Safari3）でご覧ください。その他のブラウザでは従来どおりの角ばった表示しかされません。

この丸角はFirefoxやSafari3では表示されるが、Internet ExplorerやOperaでは従来どおりの角ばった表示しかされない。

■注意

現在のところ大多数が使用しているIEでは未対応の為、IEユーザーへの配慮が必要である。

■Firefoxにおけるプロパティ名

-moz-border-radius

■Safari3におけるプロパティ名

-webkit-border-radius

■CSS3におけるプロパティ名

border-radius

TrackBack URL :

Comments (0)

@blog.justoneplanet.info