倒影的实现语言：
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
-webkit-box-reflect：后面代表的是倒影在原图的哪个方向和距离原图多少px
-webkit-linear-gradient：后面是背景色和透明度的渐变
文字的倒影实现：
<style>
body{
background: #000;
}
p{
font-size:50px;
color:#fff;
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
}
</style>
<body>
<p>罗一笑，你给我站住</p>
</body>
图片的倒影实现
<style>
body{
background: #000;
}
#div1{
width: 300px;
height: 300px;
background: url("3.jpg") no-repeat;
margin:50px auto;
-webkit-box-reflect: right 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
}
</style>
<body>
<div id="div1"></div>
</body>
图片的倒影有四个方向，分别是上下左右，对应的英文代码分别是above，below，left，right。
网友评论