我最近一直在试验一些 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 以一种非常奇怪的方式显示我的圈子: 由于 border-radius,一切都被裁剪成圆形,但内容变成了正方形。
我制作了一个 jsfiddle 来使事情变得清晰:http://jsfiddle.net/wUtPX/
这是一些已知的错误吗? 我应该将它们报告给一些错误跟踪器吗?
最佳答案
我正在阅读 MDN specs for background-size .他们在这里明确地说:
Values for the multiple backgrounds, defined by background-image, may be listed separated by commas
虽然在 background-clip规范不清楚。所以它可能不支持多个值。
另外,W3C specs不要在“分层多个背景图像”操作指南中包含背景剪辑。所以我猜它不应该支持多种属性,而 Chrome 所做的实际上是“错误的”。
您可能会找到使用背景原点(支持多个值)和背景大小的解决方法,例如:
background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;
关于firefox - 背景剪辑 : Strange behaviors,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12693874/