background-clip:奇怪的行为

时间:2012-10-02 15:55:37

标签: firefox google-chrome css3

我最近一直在尝试一些css3功能,我发现了一些奇怪的行为。 (我使用firefox-nightly 18.0a1(2012-09-24)和chrome Version 22.0.1229.91 beta)

我想制作一个说黑色背景的圆框,渐变边框说蓝色到透明。 所以我想我可以使用2个不同的背景并在内容框中剪辑一个(黑色的),使蓝色/透明的一个出现在内容框之外的填充框中。

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以非常奇怪的方式展示了我的圈子: 由于边界半径,所有东西都被剪裁成圆形,但内容变成了正方形。

我做了一个明确的事情:http://jsfiddle.net/wUtPX/

这是一些已知的错误吗? 我应该把它们报告给一些bug追踪器吗?

1 个答案:

答案 0 :(得分:0)

我正在阅读MDN specs for background-size。在这里他们明确地说:

  

由background-image定义的多个背景的值可以   以逗号分隔列出

虽然在background-clip规格中,但目前尚不清楚。所以也许它不支持多个值。

此外,W3C specs不包括“分层多个背景图像”操作方法中的背景剪辑。所以我猜它不应该支持多个礼节,Chrome正在做的事实上是“错误的”。

您可以找到一个背景源(支持多个值)和背景大小的解决方法,例如:

background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;