1

我最近一直在尝试一些 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 以一种非常奇怪的方式显示我的圆圈：由于边框半径，所有内容都被裁剪为圆形，但内容变成了正方形。

我做了一个 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 回答