CSS的未来:鲜为人知的CSS 2.1和CSS3属性

示例

1
2
3
4
5
6
7
8

.marquee {
white-space: nowrap;
overflow:-webkit-marquee;
width: 70px;
-webkit-marquee-direction: forwards;
-webkit-marquee-speed: slow;
-webkit-marquee-style: alternate;
}

要让marquee工作需要一些前提条件。首先，white-space必须设置为nowrap，这样才能让文字不自动换行，其次，overflow必须设置为-webkit-marquee，宽度也要设置为比文字实际长度小的数值。

剩下的属性确保文字从左边滚动到右边(-webkit-marquee-direction)、来回移动(-webkit-marquee-style)以及以比较低的速度移动(-webkit-marquee-speed)。其它的属性有-webkit-marquee-repetition，用来定义marquee重复的次数，-webkit-marquee-increment, 定义每次递增的速度变化。

注：虽然HTML的marquee标签在XHTML中被抛弃了，但是各浏览器还是支持的，但是有一个问题就是，marquee标签可能会占用比较大的cpu，大猫对其进行了深入的研究，结论是marquee的速度不能太快，而webkit用-webkit-marquee属性是最好的——神飞。

扩展阅读: Safari Developer Library

Gecko特有属性

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)。

1
2
3
4
5

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

浏览器支持: Gecko.

扩展阅读: Mozilla Developer Network

image-rendering

n年前，图片并不会被按照其原始大小显示，而是被设计师给缩放掉。取决于缩放的大小和上下文，图片可能会在浏览器中展现的不太好或者干脆就是错掉了的。现在，浏览器

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!