IT兄弟连 HTML5教程 CSS3属性特效 倒影

在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制作成倒影的形式，视频也不例外。