Firefox中的CSS对角线边框别名

Question

我使用CSS中的border属性绘制了一个形状。它在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>

小提琴：http://jsfiddle.net/Ly1dz111/

Chrome屏幕截图：

Firefox（Mac OS X）的屏幕截图

如何在Firefox中修复此问题？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;