1. CSS3 倒影简介

CSS3还新增了Reflections板块，即允许CSS3进行设计倒影，我们完全可以在不使用PS的情况下，通过代码在WEB端实现。但是， CSS3-reflections目前仅获得webkit引擎的支持，我们只能在谷歌与Safari浏览器中使用。但是别灰心，在未来必然会适用于更多的主流浏览器。

2. CSS3 倒影语法

语法：

box-reflect：none | <direction> <offset> ? <mask-box-image>

none：此值为box-reflect默认值，表示无倒影效果；

direction：此值表示box-reflect生成倒影的方向，主要包括以下几个值：

above：表示生成的倒影在对象（原图）的上方；

below：表示生成的倒影在对象（原图）的下方；

left：表示生成的倒影在对象(原图)的左侧；

right：表示生成的倒影在对象(原图)的右侧；

offset：用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值，如：

使用长度值来设置生成的倒影与原图之间的间距，只要是CSS中的长度单位都可以，此值可以使用负值；

使用百分比来设置生成的倒影与原图之间的间距，此值也可以使用负值

mask-box-image：用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像。

3. CSS3 倒影基本用法

（1）图片倒影：

下面的示例定义一个简单的倒影样式，倒影的位置我们可以根据实际情况来设置，此处倒影为图片下方。

img {

width:200px;

height: 200px;

-webkit-box-reflect:below;

}

<img src="2017.1.23-1.jpg"/>

ps: 如果倒影在图片上方，且没有预留一定的空间，将无法看见。我们可以给父级设置一个pading-top值便可见。

为倒影设置边距：

边距offset取值可以是长度值（px、em或rem），也可以是百分比，还可以是负值

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h26643.shtml