怎么用css3的box-reflect设计倒影效果

这篇文章主要为大家展示了“怎么用css3的box-reflect设计倒影效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么用css3的box-reflect设计倒影效果”这篇文章吧。

创新互联公司服务项目包括井研网站建设、井研网站制作、井研网页制作以及井研网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，井研网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到井研省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

说起倒影效果，在传统网页中，我们只能使用photoshop进行事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发的效率。而

css3新增了Reflections板块，css  Reflections允许css设计倒影。 

目前， css  Reflections仅获得webkit引擎的支持，我们只能够在Chrome和Safari浏览器中测试，相信以后会普及的。

css3的box-reflect属性，可以使我们进行图片、文字等的倒影设计，具体语法：

语法：

box-reflect：包括3个值。

1. direction 定义方向，取值包括 above 、 below 、 left 、 right。

above：

指定倒影在对象的上边

below：

指定倒影在对象的下边

left：

指定倒影在对象的左边

right：

指定倒影在对象的右边

2. offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。

用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。

3. mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。

取值：

none：无遮罩图像：

使用绝对或相对地址指定遮罩图像。

使用线性渐变创建遮罩图像。

使用径向(放射性)渐变创建遮罩图像。

使用重复的线性渐变创建背遮罩像。

使用重复的径向(放射性)渐变创建遮罩图像。

说明：

设置或检索对象倒影。

对应的脚本特性为boxReflect。

当对象源发生变化时，投影能够自动更新，当鼠标经过对象时，也能够在投影中看到鼠标效果，如果该属性应用到video标签上，视频也会以投影效果进行播放。而且投影的规模和反射偏移不影响页面的布局。

下面的示例定义一个简单的倒影样式，效果图如下：

css代码如下：

html代码如下：

我们在上面的基础上继续改进，为倒影设置距离，向下偏移10像素，效果图如下：

改动的css代码：

接下来继续进行改进，设计css渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，制作出渐隐效果。

css代码如下：

另外，除了图片我们可以设计倒影外，网页上的任何对象都可以设计css倒影效果，下面的示例是将文本设计为倒影效果：

完整代码如下：

以上是“怎么用css3的box-reflect设计倒影效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！