背景-剪辑:奇怪的行为

Question

我最近一直在尝试css3的一些特性，我发现了一些奇怪的行为。(我使用firefox-nightly 18.0a1 (2012-09-24)和chrome版本22.0.1229.91测试版)

我想做一个圆框，背景是黑色，渐变边框是蓝色到透明。所以我想我可以使用两种不同的背景，在内容框上裁剪一个(黑色的)，让蓝色/透明的背景出现在填充框上，而不是内容框。

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/

这是一些已知的bug吗？我应该把它们报告给一些bug追踪者吗？

Answer 1

我在读MDN specs for background-size。在这里，他们明确表示：

由背景图像定义的多个背景的背景值可以用逗号分隔列出

而在background-clip规范中，这一点并不清楚。所以它可能不支持多个值。

此外，W3C specs在“分层多个背景图像”操作指南中不包含背景剪辑。所以我猜它不应该支持多个特性，Chrome所做的实际上是“错误的”。

您可能会找到具有背景原点(支持多个值)和背景大小的变通方法，例如：

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