CSS3 box-reflect(倒影效果)

之前那只能使用PS先将倒影设计好，然后再利用其进行开发。现在box-reflect属性可以进行图片、文字甚至视频等的倒影制作。但是!目前只在webkit浏览器下支持！需要加上私有前缀-webkit- ！倒影效果不会对其他元素造成影响，不影响页面布局

1.语法

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

1.属性值direction：（4种）

above：指定倒影在对象的上方

below：指定倒影在对象的下方

left：指定倒影在对象的左方

right：指定倒影在对象的右方

2.属性值offset:（可选参数）

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

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

3.属性值mask-box-image：（可选参数）

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

none：无遮罩图像

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

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

使用径向渐变创建遮罩图像

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

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

2.图片倒影

CSS代码：

body{background:#000;color:#fff;}
img{
display: block;
width:350px;height:350px;
margin:150px auto;
/*只在webkit内核支持，三个属性值：倒影位置 倒影距离图片位置(可选参数值) 倒影渐变(可选参数值)*/
-webkit-box-reflect:right 10px -webkit-linear-gradient(right,rgba(0, 0, 0,1) 0%,rgba(0, 0, 0, 0) 100%);

}

3.文字倒影

HTML

<div>
<h1>你无法两次在镜中</h1>
<p>你无法两次在镜中<br />
注视同一双眼睛，同时<br />
摘下因果倒置的酒杯<br />
两枚，先后经过的死者无法<br />
接近更深的黑色<br />
...</p>
</div>

CSS

div {
width:400px;
border: 1px solid #fff;
color: #fff;
-webkit-box-reflect: below 5px;
text-align: center;
}

效果图：

4.视频倒影

方法同上！哈哈哈….interesting