CSS3 box-reflect 属性
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法:
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>:
- 使用重复的径向(放射性)渐变创建遮罩图像。
说明:
设置或检索对象倒影。
- 对应的脚本特性为boxReflect。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 墨绿 = 部分支持
- 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6.0-10.0 | 4.0-9.0 | 5.1 | 13.0 | 11.50-11.60 |