Question

我已经使用边框创建了一个简单的CSS播放按钮，您可以在此处看到，使用此CSS

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;
}

另请参阅：http://jsfiddle.net/o0exn7LL/

这在Chrome和IE中看起来很不错，但在Firefox中边缘是锯齿状的。我在Firefox中使用3d变换看到了包含锯齿状边缘的其他问题，这些问题通过添加透明轮廓来解决，但这种情况不是解决方案。

有没有人知道是否有办法让这些优势在Firefox中变得更加流畅？

谢谢！

Answer 1

您可以使用border-style: inset;

<强> CSS

.btn-play { 
  border-left:50px inset black;
  border-top:40px inset rgba(255, 255, 255, 0);
  border-bottom:40px inset rgba(255, 255, 255, 0);
}

<强> DEMO HERE

Answer 2

您可以尝试此-moz-transform: scale(.9999);

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;
    -moz-transform: scale(.9999); //added this
}

<强> Demo Here

Answer 3

将-moz-transform: scale(.9999);添加到您的.btn-play

.btn-play { 
    border-left:50px solid black;
    border-top:40px solid transparent;
    border-bottom:40px solid transparent;  
    -moz-transform: scale(.9999);
}

<强> DEMO

Firefox中的锯齿状边缘问题

3 个答案: