8

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

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

现在我们可以在这些三角形周围看到一个不优雅的灰色边框。我还没有找到摆脱它的窍门。编辑：更容易看到你是否将“象棋透明”背景强制为“绿色”之类的东西

最重要的是，在 Firefox 17 之前，当人们抱怨这些三角形看起来有多么锯齿时，另一个技巧是将边框样式属性设置为“虚线”而不是实线。

在三角形生成器上使用 firebug，您可以快速看到它现在是如何显示的。

有谁知道解决这个问题？

编辑：按照建议使用边框样式：插图在我的 FF17 上呈现较浅的颜色

4

2 回答 2

9

这种 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() 修复与虚线边框修复（但仅在透明边框上）相结合似乎可以呈现一个完美的三角形，而没有难看的模糊边框。

于 2013-09-13T20:14:29.207 回答
8

好的，这是我迄今为止最好的解决方案：

获取三角形的 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;

正如回复中所说：按照建议将边框样式设置为“插入”会改变 FF17 上的颜色。

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

于 2012-11-30T08:19:15.997 回答