Css Firefox中的边缘锯齿问题

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

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

另见：

这在Chrome和IE中看起来不错，但在Firefox中，边缘是参差不齐的。我见过Firefox中使用3d变换时出现锯齿状边缘的其他问题，这些问题可以通过添加透明的轮廓来解决，但在这种情况下，这不是一个解决方案

有人知道有没有办法让这些边缘在Firefox中更加平滑

---

谢谢

您可以使用

边框样式：插入

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);
}

您可以使用
边框样式：插入

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);
}

您可以尝试此
-moz变换：scale（.9999）

您可以尝试此
-moz变换：scale（.9999）

添加
-moz变换：缩放（.9999）到您的
.btn播放

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

添加
-moz变换：缩放（.9999）到您的
.btn播放

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

为什么不使用图像/字体图标呢？使用CSS可以让我更灵活地使用不同的大小/颜色和动画，我不必加载任何资源。为什么不使用图像/字体图标呢？使用CSS可以让我更灵活地使用不同的大小/颜色和动画，我不必加载任何资源。就像这样，非常简单有效。非常好的解决方案，谢谢！不过，它会稍微改变颜色（从黑色到深灰色，但这是一个小问题）@Leon如果使用-moz transform:scale（.9999），它不会改变颜色。是的，我注意到了。在这种情况下，这不是一个大问题，但我可能会在将来使用转换解决方案时，颜色是一个更大的问题。非常感谢。喜欢它，非常简单有效。非常好的解决方案，谢谢！不过，它会稍微改变颜色（从黑色到深灰色，但这是一个小问题）@Leon如果使用-moz transform:scale（.9999），它不会改变颜色。是的，我注意到了。在这种情况下，这不是一个大问题，但我可能会在将来使用转换解决方案时，颜色是一个更大的问题。非常感谢。谢谢，这是一个很好的解决方案！然而，我最终使用了插入边框样式的解决方案。（这看起来很简单，因为我已经在按钮上使用了不同的动画转换）谢谢，这是一个很好的解决方案！然而，我最终使用了插入边框样式的解决方案。（这看起来很简单，因为我已经在按钮上使用了不同的动画转换）谢谢，这是一个很好的解决方案！然而，我最终使用了插入边框样式的解决方案。（这看起来很简单，因为我已经在按钮上使用了不同的动画转换）祝你一切顺利：）谢谢，这是一个很好的解决方案！然而，我最终使用了插入边框样式的解决方案。（这似乎更简单，因为我已经在按钮上使用不同的动画转换）祝你一切顺利：）