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