在Web制作中，有些时候需要实现一些倒影的效果。在传统网页中，我们只能使用photoshop事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发效率。而CSS新增了Reflections板块，CSS Reflections允许设计倒影，目前，CSS Reflections仅获得webkit引擎的支持，我们只能够在Chrome和Safari浏览器中测试。CSS3的box-reflect属性，使我们可以对图片、文字等进行倒影设计，具体语法：
box-reflect: none | <direction> <offset> ? <mask-image> ?
由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect是需要添加-webkit的前缀。
1．direction
direction定义方向，取值包括above、below、left、right。具体含义如表1：
表1 box-reflect属性的direction参数值取值说明
2．offset
offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定，默认为0。用长度值来定义倒影与对象之间的间隔，可以为负值。用百分比来定义倒影与对象之间的间隔，可以为负值。
3．mask-box-image
mask-box-image定义遮罩图像，该图像将覆盖投影区域。遮罩图像可以是背景图片，也可以是渐变生成的背景图像。如果省略该值，则默认无遮罩图像。该参数有如下取值可以选择：
（1）none：无遮罩
（2）使用绝对或相对地址指定遮罩图像
（3）使用线性渐变创建遮罩图像
（4）使用径向（放射性）渐变创建遮罩图像
（5）使用重复的线性渐变创建遮罩图像
（6）使用重复的径向（放射性）渐变创建遮罩图像
说明
设置或检索对象倒影
对应的脚本特性为boxReflect
下面的实例定义一个简单的倒影样式，若我们想要为下面一幅图增加一个在水中的倒影，我们就需要简单的利用CSS3的box-reflect特性添加倒影，原图如下：
经我们使用CSS为其添加box-reflect属性后就形成了这两座山的倒影，效果如下：
该实例的代码如下：
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，图片被加上了倒影，如图1所示。
图1 倒影
我们在上例倒影基础上继续改进，为倒影设置距离，向下偏移2像素，倒影效果如图2所示：
图2 倒影向下偏移2px
修改的CSS代码如下：
接下来继续进行改进，设计css渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，制作出渐隐效果。效果图如图3所示：
图3 倒影渐隐效果
css代码如下：
另外，我们除了可以为图片我们设计倒影外，网页上的任何对象都可以设计css倒影效果，下面的实例是将文本设计为倒影效果。效果如图1.30所示：
图1.30 文本倒影效果
文本倒影的HTML代码如下：
倒影效果不会对其它元素产生影响，不会影响页面布局。当然，页面上的任何元素都可以用CSS3制作成倒影的形式，视频也不例外。