rgba()とborderとborder-radiusとbackground-clip

Firefoxが対応したrgba()とborderとborder-radiusとbackground-clipを組み合わせた場合に気づいたこと

Firefoxは3.0でCSSのrgba()に対応したが、borderに指定した場合に気づいたこと。 それと3.1 Beta 1で見つけた変なところ。

Firefox 3.0.3
Firefox 3.1 Beta 1
  • 上記と同様、立体系ボーダーでは透過されていない
  • また、border-radiusbackground-clip : paddingをあわせて指定している場合、paddingの四隅がborder-radiusで指定した値でクリップされて、ボーダーの四隅との間に妙な隙間が生じている。(3.0.3ではボーダーの内側にあわせてクリップされている)。
    これはBugzillaにあった Bug 456219 – wrong clipping when -moz-background-clip:padding is in effect and box has round corners
Safari 3.1.2
  • 上記2点はいずれも問題なし…ってことはなかった。border-radiusとともにbackground-clip : padding;を指定した場合、paddingの四隅は全く丸められておらず、borderの下に尖った角が入り込んでいた

テスト用HTML

"rgba()とborderとborder-radiusとbackground-clip"へのTwitter上でのコメントやRT

ツイートを取得できませんでした。