首页 > 未分类 > CSS3中的box-reflect倒影样式
2012
11-20

CSS3中的box-reflect倒影样式

语法:

box-reflect:none | <direction> <offset>? <mask-box-image>?

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值:none

 

取值:

none:无倒影

<direction>

above:指定倒影在对象的上边below:指定倒影在对象的下边left:指定倒影在对象的左边right:指定倒影在对象的右边

<offset>

<length>:用长度值来定义倒影与对象之间的间隔。可以为负值<percentage>:用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>

none:无遮罩图像

<url>:使用绝对或相对地址指定遮罩图像。

<linear-gradient>:使用线性渐变创建遮罩图像。

<radial-gradient>:使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。

 

兼容性:

目前支持的浏览器:Safari 5.0以上  和 Chrome 13.0以上。

 

最后编辑:
作者:品味人生
就是一个管理员,frontopen的管理员,嗯,介绍完毕!
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!