角丸にチャレンジ – 透過PNG画像＋CSS編

前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。（なお、透過PNG画像は IE6以下では未対応です。）

この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます（サンプル）。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。

.dialog .header{
background:transparent url(rc_r1_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .header .c{
background:transparent url(rc_r1_c2.gif) no-repeat right 0px;
margin-right:-13px;
}
.dialog .body{
background:transparent url(rc_r2_c1.gif) repeat-y 0px 0px;
margin-right:13px;
}
.dialog .body .c{
background:transparent url(rc_r2_c2.gif) repeat-y right 0px;
margin-right:-13px;
}
.dialog .footer{
background:transparent url(rc_r3_c1.gif) no-repeat 0px 0px;
margin-right:13px;
}
.dialog .footer .c{
background:transparent url(rc_r3_c2.gif) no-repeat right 0px;
margin-right:-13px;
}

これで、透過PNG画像でも角丸ができました。（サンプル）