CSS的未来：一些试验性CSS属性(2)

　　-webkit-box-reflect

　　你还记得几乎每个网站都把他们的网站logo或者头部的文字做成倒影的那个年代吗?谢天谢地，那个年代已经过去了，但是如果你要在一些按钮、导航、或者其他UI元素上更好的使用这个技术，-webkit-box-reflect是更好的选择。

　　这个属性接受above、below、left和right四个关键词，它们设置倒影的方向，它们和一个设置元素和它的倒影建的距离的数字一起使用。同时，蒙板图片也是同样支持的(看上面的-webkit-mask部分，不要搞混了哈)。倒影会自动生成并对布局没有影响。下面的元素只用了CSS，第二个按钮用了-webkit-box-reflect属性。

　　示例

　　这个倒影会出现在它的父元素的下面并有5px的间距:

　　-webkit-box-reflect: below 5px;

　　这个倒影会投射到元素的右边，没有间距。然后，一个蒙板将会被应用(url(mask.png)):

　　-webkit-box-reflect: right 0 url(mask.png);

　　-webkit-marquee

　　另一个属性让我们回到美好的从前：那个遍地marquee(跑马灯)的年代。有趣的是这个已经被遗弃的标签反而在现在变的很有用，比如我们在比较小的手机屏幕上切换内容，如果不断行的话文字将不能完全显示。

　　ozPDA创建的这个天气的应用很好的使用了它。 (如果你木有看到变换的文字，可以尝试换一个城市来体验。需要使用WebKit内核浏览器)

　　示例

　　.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属性是最好的——神飞。