1

私は最近いくつかのcss3機能を実験していて、いくつかの奇妙な振る舞いを見つけました。（私はfirefox-nightly 18.0a1（2012-09-24）とchromeバージョン22.0.1229.91ベータを使用しています）

背景が黒、グラデーションの境界線が青から透明のサークルボックスを作りたかったのです。そのため、2つの異なる背景を使用し、コンテンツボックスで1つ（黒）をクリップして、コンテンツボックスの外に残っているパディングボックスに青/透明の背景を表示できると思いました。

background: -webkit-linear-gradient(0deg, black, black), -webkit-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background: -moz-linear-gradient(0deg, black, black), -moz-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background-clip: content-box, border-box;

Chromeでは完全に正常に動作しますが、Firefoxでは、異なる背景クリップが適用されていないようです。代わりに、後者のクリップのみが適用されているため、両方の背景が同じようにクリップされているため、青が見えません/透明な背景。

それから、私はその周りに外側の境界線、たとえば薄い青い境界線を置きたいと思い始めました。だから私は追加しました：

border: 3px solid blue;

Chromeは私の円を非常に奇妙な方法で表示しました。境界線の半径のためにすべてが円の形にクリップされましたが、コンテンツは正方形になりました。

私は物事を明確にするためにjsfiddleを作成しました：http：//jsfiddle.net/wUtPX/

これはいくつかの既知のバグですか？それらをいくつかのバグトラッカーに報告する必要がありますか？

4

1 に答える 1

0

background-sizeのMDN仕様を読んでいます。ここで彼らは明確にそれを言います：

background-imageで定義された複数の背景の値は、コンマで区切ってリストできます。

バックグラウンドクリップの仕様では、明確ではありません。したがって、複数の値をサポートしていない可能性があります。

また、W3Cの仕様には、「複数の背景画像のレイヤー化」のハウツーに背景クリップが含まれていません。したがって、複数のプロパティをサポートするべきではないと思います。Chromeが行っていることは、実際には「間違っている」ことです。

たとえば、background-origin（複数の値をサポート）とbackground-sizeの回避策を見つけることができます。

background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;
于 2012-10-02T16:13:48.927 に答える