倒影的實現語言:
-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搬素。