3D CSS 变换，Firefox 中的锯齿状边缘

Posted 2023-03-06

【中文标题】3D CSS 变换，Firefox 中的锯齿状边缘

【英文标题】：3D CSS transform, jagged edges in Firefox

【发布时间】：2012-03-03 08:50:52

【问题描述】：

类似于“css transform, jagged edges in chrome”，同样适用于 Firefox 的 3D 变换，例如：http://jsfiddle.net/78d8K/5/（Firefox）

这一次，backface-visibility 没用 :(

有什么想法吗？

【问题讨论】：

这是一个支持 Webkit 的更新版本：jsfiddle.net/78d8K/6

这里不关心 webkit（这很好），这里关心 Firefox :)

在这里为这个错误投票：bugzilla.mozilla.org/show_bug.cgi?id=766345

【参考方案1】：

编辑后的答案：（在 cmets 之后）

“解决方法”，添加一个透明的outline属性：

outline: 1px solid transparent;

在 Firefox 10.0.2 Windows 7 上测试：http://jsfiddle.net/nKhr8/

原答案：（取决于背景颜色）

“解决方法”，添加与背景颜色相同的 border 属性（本例为白色）：

border: 1px solid white;

在 Firefox 10.0.2 Windows 7 上测试：http://jsfiddle.net/LPEfC/

【讨论】：

有趣 :) 并且实际上适用于示例...除非背景不再是白色：jsfiddle.net/LPEfC/1 我尝试使用 border-width:0 或 border-color:transparent 或 border-color:rgba(255,255,255,0) 以达到目的独立于背景颜色 - 但不再起作用...... - 但有趣的解决方法，谢谢！

再次阅读我的答案，将“背景颜色”放在边框上

Xubuntu 中的 Firefox 21.0 没有抗锯齿，这里没有任何示例。 :(

我没想到这会帮助在 PNG img 的内部消除锯齿，但奇怪的是，它确实如此！

在使用顶部边框（指针提示）时不适用于 Mac FF。不过很有趣

【参考方案2】：

如果要防止反锯齿边框

下面对我来说效果更好

border: 1px solid rgba(0, 0, 0, 0.1); 

如果边框应该清晰可见，但这可能不是完美的解决方案，您最好坚持@Juan 的回答。

下面是立方体转动的截图

【讨论】：

当接受的解决方案没有时，这对我来说适用于 Mac Firefox。

【参考方案3】：

除了使用outline，以下也可以：

box-shadow: 0 0 0 1px transparent;

【参考方案4】：

filter:blur(.25px); 适合我，而且看起来不太模糊。

示例：https://codepen.io/Grilly86/pen/QWLXBbX（尝试在 (S)CSS 中编辑第 22 行）