CSS Firefox 中的对角线边框别名

Question

我使用 CSS 中的边框属性绘制了一个形状。在 Chrome 中看起来不错，但在 Firefox 中边框真的很难看：

.shape
{
 width: 100px;
 height: 50px;
 margin: 0 auto;
 background-color: #3F7296;
 position: relative;
 color: #FFF;
 line-height: 50px;
 font-size: 40px;
}
.b1, .b2
{
 position: absolute;
 left: 100px;
 bottom: 0px;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 0px 0px 50px 16px;
 border-color: transparent transparent transparent #3F7296;
}

.b2
{
 left: -16px;
 border-width: 50px 16px 0px 0px;
 border-color: transparent #3F7296 transparent transparent;
}

<div class="shape">
 <i class="b1"></i>
 <i class="b2"></i>
</div>

Fiddle: http://jsfiddle.net/Ly1dz111/

来自 Chrome 的屏幕截图：

来自 Firefox 的屏幕截图（Mac OS X）

如何在 Firefox 中修复此问题？

Answer 1

这是一个 known bug in Firefox's handling of diagonal borders，解决方法是在元素上设置缩放变换，以便 Firefox 通过额外的图形步骤强制运行它。

在您的示例中，解决方案是在 .b1 和 .b2 元素上设置 -moz-transform: scale(.9999)。这会在 Firefox 中强制抗锯齿。

.shape
{
 width: 100px;
 height: 50px;
 margin: 0 auto;
 background-color: #3F7296;
 position: relative;
 color: #FFF;
 line-height: 50px;
 font-size: 40px;
}
.b1, .b2
{
 position: absolute;
 left: 100px;
 bottom: 0px;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 0px 0px 50px 16px;
 border-color: transparent transparent transparent #3F7296;
 -moz-transform: scale(.9999)
}

.b2
{
 left: -16px;
 border-width: 50px 16px 0px 0px;
 border-color: transparent #3F7296 transparent transparent;
}

<div class="shape">
 <i class="b1"></i>
 <i class="b2"></i>
</div>

CSS Firefox 中的对角线边框别名

CSS diagonal border aliasing in Firefox

html

css

firefox

border

antialiasing