html – Firefox中的CSS对角线边框别名

概述我通过使用CSS中的border属性绘制了一个形状.它在Chrome中看起来不错,但在Firefox中,边框非常难看： .shape{ width: 100px; height: 50px; margin: 0 auto; background-color: #3F7296; position: relative; color: #FFF; line-height: 50px; 我通过使用CSS中的border属性绘制了一个形状.它在Chrome中看起来不错,但在firefox中,边框非常难看：

@H_419_8@

@H_419_8@

.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 >	<i ></i>	<i ></i></div>

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

Chrome的屏幕截图：@H_419_8@

firefox(Mac OS X)的屏幕截图@H_419_8@

如何在firefox中修复此问题？@H_419_8@解决方法 这是一个 known bug in Firefox’s handling of diagonal borders,解决方法是在元素上设置缩放变换,以便firefox强制通过额外的图形步骤运行它.

@H_419_8@

在您的示例中,解决方案是在.b1和.b2元素上设置-moz-transform：scale(.9999).这迫使firefox中的抗锯齿.@H_419_8@

@H_419_8@

.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 >	<i ></i>	<i ></i></div>

总结

以上是内存溢出为你收集整理的html – Firefox中的CSS对角线边框别名全部内容，希望文章能够帮你解决html – Firefox中的CSS对角线边框别名所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。