角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。
角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。
<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span> <span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span> <span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span> <span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>
コーナーだけの画像を作って、
スタイルシートで背景指定する。
html {
background-color:#113A57;
}
#main {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#main{
background-color:#fff;
}
.radiusFix {
background:url(../images/radius_sprite.png) no-repeat left top;
}
.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}
指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。（floatが中にある要素に使った場合など）
左：使用後 右：使用前
