css - Firefox 17 和基于 CSS 边框的三 Angular 形无法正确呈现

Question

像许多前端开发人员一样，我一直在使用边框技巧在 CSS 中呈现三 Angular 形。 http://apps.eky.hk/css-triangle-generator/这个生成器有助于这项技术。

今天，Firefox 团队发布了一个新版本，但在渲染引擎上没有任何明确的变更日志。

现在我们可以在这些三 Angular 形周围看到一个不雅的灰色边框。我还没有找到摆脱它的技巧。 编辑:如果您将“类似国际象棋的透明”背景强制设置为“绿色”之类的内容，则更容易看出

最重要的是，在 Firefox 17 之前，当人们提示这些三 Angular 形看起来有多别名时，一个额外的技巧是将 border-style 属性设置为“dashed”而不是 solid。

在三 Angular 形生成器上使用 firebug，您可以快速查看它现在的显示效果。

有人知道解决这个问题的方法吗？

编辑:按照建议使用 border-style:inset 在我的 FF17 上呈现更浅的颜色

Answer 1

Adeher 的修复和其他虚线边框修复的组合似乎完美地解决了 FF23 中的问题。

长格式:

border-top: 10px solid #FF0000;
border-left: 30px dotted rgba(255, 0, 0, 0);
border-right: 30px dotted rgba(255, 0, 0, 0);

将 Adeher 的 rgba() 修复与虚线边框修复(但仅在透明边框上)相结合似乎可以呈现一个完美的三 Angular 形，没有难看的模糊边框。