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));
}
标题
效果如上图,请自行替换图片尝试