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 属性同样可以用于
值得注意的是,-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特有属性用法详解的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3122726.html