视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css3中一些隐藏的高级属性之Gecko特有属性用法详解
2020-11-27 18:50:37 责编:小采
文档

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.

下载本文
显示全文
专题