铁血边边界问题在Firefox

我使用的边界，你可以看到这里创建了一个简单的CSS播放按钮，使用该CSS铁血边边界问题在Firefox

.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在这些边缘更流畅？

谢谢！

来源

2015-10-15 Leon

为什么不使用图像/字体图标是什么？ – Justinas

使用CSS可以让我更灵活地使用不同的大小/颜色和动画，而且我不需要加载任何资源。 – Leon

您可以使用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

来源

2015-10-15 08:11:43

喜欢它，真的很简单有效。 –

伟大的解决方案，谢谢！但它会稍微改变颜色（从黑色到深灰色，但这是一个小问题） – Leon

@Leon如果使用-moz-transform：scale（.9999），它将不会更改颜色。 –

你可以试试这个-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

来源

2015-10-15 08:13:42

谢谢，这是一个很好的解决方案！然而，我最终使用了嵌入边框样式的解决方案。（这看起来更简单，因为我已经在按钮上使用了不同的动画变换） – Leon

好吧快乐的编码。 –

添加-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

来源

2015-10-15 08:14:28

谢谢，这是一个很好的解决方案！然而，我最终使用了嵌入边框样式的解决方案。（这看起来更简单，因为我已经在按钮上使用了不同的动画效果） – Leon

祝你一切顺利:) –

铁血边边界问题在Firefox

回答

相关问题