[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[边框属性](#)» 相关内容： [**其它边框属性参考**选择其它项](#) - [border](#) - [border-width](#) - [border-style](#) - [border-color](#) - [border-top](#) - [border-top-width](#) - [border-top-style](#) - [border-top-color](#) - [border-right](#) - [border-right-width](#) - [border-right-style](#) - [border-right-color](#) - [border-bottom](#) - [border-bottom-width](#) - [border-bottom-style](#) - [border-bottom-color](#) - [border-left](#) - [border-left-width](#) - [border-left-style](#) - [border-left-color](#) - [border-image](#) - [border-radius](#) - [border-top-left-radius](#) - [border-top-right-radius](#) - [border-bottom-right-radius](#) - [border-bottom-left-radius](#) - [box-shadow](#) - [box-reflect](#) # 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: [简单图片倒影](http://demo.doyoe.com/css3/box-reflect/reflect-direction.htm)See with Webkit above：指定倒影在对象的上边below：指定倒影在对象的下边left：指定倒影在对象的左边right：指定倒影在对象的右边 ### <offset>　Demo: [图片与倒影间隔](http://demo.doyoe.com/css3/box-reflect/reflect-offset.htm)See with Webkit [<length>](#)：用长度值来定义倒影与对象之间的间隔。可以为负值[<percentage>](#)：用百分比来定义倒影与对象之间的间隔。可以为负值 ### <mask-box-image>　Demo: [更真实的图片倒影](http://demo.doyoe.com/css3/box-reflect/reflect-image.htm)[文字倒影与渐变](http://demo.doyoe.com/css3/box-reflect/reflect-text.htm)See with Webkit 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 | ### 示例： 你看到倒影了么？ Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved