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

Question

像许多前端开发人员一样,我一直在使用边框技巧在CSS中渲染三角形. http://apps.eky.hk/css-triangle-generator/这个发电机有助于这项技术.

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

现在我们可以在这些三角形周围看到一个不合适的灰色边框.我还没有找到摆脱它的伎俩.编辑:更容易看出你是否强制"象棋般的透明"背景像"绿色"

最重要的是,在Firefox 17之前,当人们抱怨这些三角形看起来有些混淆时,另外一个技巧是将border-style属性设置为"dashed"而不是solid.

在三角形生成器上使用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()修复与虚线边框修复(但仅在透明边框上)相结合,似乎呈现出完美的三角形,没有难看的模糊边框.

Answer 2

好的,这是我迄今为止最好的解决方案:

获取三角形的rgb值,并将其用作0不透明度rgba而不是"透明"用于三角形的相对边框.

保持旧语法"透明"为基础将作为IE8的后备

最终得到这样的东西:

border-color: transparent transparent transparent #ffffff;
border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffffff;

正如回复中所说:按照建议将边框样式设置为"inset"会改变FF17上的颜色.

我希望有人会找到一个更简单的解决方案,或者这篇文章会帮助其他人.