Question

我一直在使用CSS边框属性以及伪元素：before和：after为我的元素提供几何形状的外观，一个简单的例子就是这样：

HTML：

<div id="shapeOne"></div>

CSS：

#shapeOne
{
   height:0px;
   width:0px;
   margin:20px;
   border-style:solid;
   border-width:200px 200px 200px 200px;
   border-color:transparent #f00 #0f0 transparent;  
}

因此，通过使两个边框透明，并给出两种颜色，我有效地制作了三角形。

您可以在此处查看示例：http://jsfiddle.net/VTzS9/1/

除了Firefox（特别是PC版本，因为它在Mac上的Firefox上看起来很正常），这似乎在所有浏览器中都能正常显示。问题是Firefox似乎在边界之间放置了阴影/扭曲效果，并在边框（空元素所在的位置）中创建了“扭结” - 并且随着不同边界面之间的大小差异的增加，这种效果会增加 - 所以边界大小相等（上面链接中我的第一个形状）问题几乎（但仍然）明显，但随着边框尺寸之间的差异增大（链接中的形状二和三），效果变得更加明显。 / p>

有没有人知道造成这种情况的原因是什么，如果我有什么办法可以消除这种影响？

干杯！

Answer 1

使用

rgba(255,255,255,0)

而不是

transparent

这也使它适用于Firefox。

演示：http://jsfiddle.net/SkXXy/

P.S：同样的问题：Weird dark border :after css arrow in Firefox

影子＆amp; Firefox中边界之间的失真

1 个答案: