最近，我一直在尝试一些css3功能，但发现了一些奇怪的行为。 （我使用firefox-nightly 18.0a1（2012-09-24）和Chrome版本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以一种非常奇怪的方式显示了我的圈子：
由于边界半径，所有内容都被剪切成圆形，但是内容变成了正方形。
我做了一个jsfiddle来弄清楚：http://jsfiddle.net/wUtPX/
这是一些已知的错误吗？
我应该将其报告给一些错误跟踪器吗？
最佳答案
我正在阅读MDN specs for background-size。他们在这里明确地说：
由background-image定义的多个背景的值可能
以逗号分隔列出
在background-clip规格中尚不清楚。因此，也许它不支持多个值。
另外，W3C specs在“分层多个背景图像”操作方法中不包括背景剪辑。因此，我认为它不应该支持多个专有属性，而Chrome所做的实际上是“错误的”。
您可能会发现具有背景来源（支持多个值）和背景大小的解决方法，例如：
background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;
关于firefox - 背景剪辑:奇怪的行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12693874/