jmblog.jp - 角丸にチャレンジ - 透過PNG画像＋CSS編

前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。（なお、透過PNG画像は IE6以下では未対応です。） この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます（サンプル）。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。

[lomo_lomo]

IE6以下では未対応

[aratako0]

方法としてはOKだが、PNGがIE6で無理というのがキツイ。