当前位置:Gxlcms > css > css3中一些隐藏的高级属性之Gecko特有属性用法详解

css3中一些隐藏的高级属性之Gecko特有属性用法详解

时间:2021-07-01 10:21:17 帮助过:54人阅读

font-size-adjust

这个有用的CSS3属性目前只有Firefox支持。我们可以用它来设定指定元素的文字大小(font-size)应该相对于小写字母的高度(x-height)而不是大写字母的高度(cap height)。比如,Verdana比同型号的Times字体更清晰,它有着更矮的x-height。为了弥补这个缺陷,我们可以用font-size-adjust属性来纠正后者。

该属性在拥有不同的x-height的字体上非常有用。即便你在小心的使用小号字体,在问题出现时font-size-adjust也能提供解决方案。

示例

如果由于某种原因用户的电脑上没有安装Verdana,那么Arial就会被修正,从而和Verdana有相同的长宽比(0.58)。

   p {
font-family:Verdana, Arial, sans-serif;
font-size: 12px;
font-size-adjust: 0.58;
}

浏览器支持: Gecko.

image-rendering

n年前,图片并不会被按照其原始大小显示,而是被设计师给缩放掉。取决于缩放的大小和上下文,图片可能会在浏览器中展现的不太好或者干脆就是错掉了的。现在,浏览器有了更好的算法来显示缩放的图片,不过,在你的图片被缩放后完全的控制其表现也是件很赞的事情。

如果你的图片有比较锐的线条并希望他们在缩放后保持它,这个Gecko私有属性就显得特别有用。相关的值是-moz-crisp-edges。同样的算法也用在optimizeSpeed,而auto 和optimizeQuality 定义为标准行为(用可行的最佳质量来缩放元素)。 image-rendering 属性同样可以用于<video> 和<canvas>元素,和用于背景图片一样。这是个CSS3 标准属性,但是目前只有Firefox支持。

值得注意的是,-ms-interpolation-mode: bicubic,尽管它是个IE专有属性。然而,它让Internet Explorer 7 在缩放图片后将其渲染为比较高的质量。由于这个浏览器默认处理的很烂,所以这个属性可能会很有用。

浏览器支持: Gecko.

-moz-border-top-colors

这个属性可以归类为’养眼’。它让你可以在border宽度大于1px的时候为其设置不同的边框颜色。当然-moz-border-bottom-colors, -moz-border-left-colors 和-moz-border-right-colors也是可用的。

不爽的是,没有一个简写的-moz-border-colors 缩写,所以每个边框都要分开设置。同时,border-width要和给到的颜色的数量保持一致,否则,最后的那个颜色值会填充到剩下的宽度。

示例

这个例子中,元素的左右两边边框会是标准的橙色,上下则有种类似渐变的颜色——红黄蓝三色。

div {
border: 3px solid orange;
-moz-border-top-colors: red yellow blue;
-moz-border-bottom-colors: red yellow blue;
}

浏览器支持: Gecko.

以上就是css3中一些隐藏的高级属性之Gecko特有属性用法详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行