css3技术

CSS的未来:一些试验性CSS属性_div+css教程(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-15 14:18 我要评论( )

这个属性接受above、below、left和right四个关键词,它们设置倒影的方向,它们和一个设置元素和它的倒影建的距离的数字一起使用。同时,蒙板图片也是同样支持的(看上面的-webkit-mask部分,不要搞混了哈)。倒影会自

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

  

CSS的未来:一些试验性CSS属性

 

  示例

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

  1

  -webkit-box-reflect: below 5px;

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

  1

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

  -webkit-marquee

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

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

  示例

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评