CSS3 box-reflect属性设置或检索对象倒影

说明：

设置或检索对象倒影。对应的脚本特性为boxReflect。

语法：

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>：
使用重复的径向(放射性)渐变创建遮罩图像。

兼容性：

类型	IE	Firefox	Safari	Chrome	Opera
版本	6.0-10.0不支持	4.0-9.0不支持	5.1支持	13.0支持	11.50-11.60不支持

查看示例：

https://pdbn.top/uploads/2015/08/daoying.html

原文链接http://www.w3chtml.com/css3/properties/border/box-reflect.html