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
-
- border-styleに、groove、ridge、inset、outsetの立体系(?)の指定をした場合、透過されていない。
ここいらへん? Bug 326624 – verify behaviour of rgba/hsla CSS colors with double painting
投稿してみた BugTrack-Fx3/165 - もじら組Wiki
受け付けられた bug 6400 – borderにおけるrgbaの対応が不完全
Bug 461512 – nsCSSColorUtils doesn't support alpha color (border color is always solid color if the border-style is groove, ridge, inset, outset)
- border-styleに、groove、ridge、inset、outsetの立体系(?)の指定をした場合、透過されていない。
- Firefox 3.1 Beta 1
-
- 上記と同様、立体系ボーダーでは透過されていない
- また、border-radiusとbackground-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の下に尖った角が入り込んでいた
"rgba()とborderとborder-radiusとbackground-clip"へのTwitter上でのコメントやRT
ツイートを取得できませんでした。