box-reflect
- 版本：CSS3
- 媒体：视觉
语法：
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> Demo: 简单图片倒影 See with Webkit
- above：
- 指定倒影在对象的上边
- below：
- 指定倒影在对象的下边
- left：
- 指定倒影在对象的左边
- right：
- 指定倒影在对象的右边
<offset> Demo: 图片与倒影间隔 See with Webkit
- <length>：
- 用长度值来定义倒影与对象之间的间隔。可以为负值
- <percentage>：
- 用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image> Demo: 更真实的图片倒影 文字倒影与渐变 See with Webkit
- none：
- 无遮罩图像
- <url>：
- 使用绝对或相对地址指定遮罩图像。
- <linear-gradient>：
- 使用线性渐变创建遮罩图像。
- <radial-gradient>：
- 使用径向(放射性)渐变创建遮罩图像。
- <repeating-linear-gradient>：
- 使用重复的线性渐变创建背遮罩像。
- <repeating-radial-gradient>：
- 使用重复的径向(放射性)渐变创建遮罩图像。
说明：
设置或检索对象倒影。
- 假设定义了 <mask-box-image>，<offset>必须指定，否则可以省略
- 对应的脚本特性为boxReflect。
兼容性：
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
| Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 6.0-11.0 | 2.0-40.0 | 4.0-45.0-webkit- | 4.0-8.0-webkit- | 15.0-29.0-webkit- | 4.0-8.3-webkit- | 2.1-4.4.4-webkit-#1 | 18.0-42.0-webkit- |
- 需要注意的是4.0以前的安卓系统需要使用老式的渐变语法，详见<gradient>下的各种渐变支持数据。