x在Web的制作过程中，有时候需要实现一些倒影效果，此时就需要使用box-reflect属性了
需要注意的是该属性目前仅在Chrome,Safari和Opera浏览器下支持，Firefox需要做特殊处理
box-reflect语法
-webkit-box-reflect:direction offset mask-box-image
取值：direction 表示生成倒影的方向above(上方)/below(下方)/left(左侧)/right(右侧)
offset 表示生成的倒影与原图之间的间距
mask-box-image 用来设置倒影的效果，可以是背景图片，也可以是渐变生成的背景图像
理论完毕，来点实际的,
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>倒影</title>
<link rel="stylesheet" href="css/xuanxue.css"/>
</head>
<body>
<h1>倒影</h1>
<div class="reflection">
<img src="img/timg.jpg" alt=""/>
</div>
</body>
</html>.reflection {
margin: 0 auto;
width: 300px;
height: 200px;
}
.reflection img {
width: 100%;
height: 100%;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
标题
效果如上图，请自行替换图片尝试