倒影.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
倒影<br />
box-reflect: below|above|left|right
above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边
<style>
/*倒影*/
.box3 img{
width:200px;
height: 200px;
/*-webkit-box-reflect:below 15px ;*/
/*-webkit-box-reflect:right 20px;*/
/*-webkit-box-reflect:below 15px -webkit-radial-gradient(50% 50%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 60%);*/
/*-webkit-box-reflect:below 15px -webkit-radial-gradient(50% 50%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 60%);*/
/* -webkit-box-reflect:below 15px -webkit-linear-gradient( rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 70%);*/
-webkit-box-reflect:below 15px -webkit-linear-gradient(rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.6) 80%);
}
.box4{
margin-top:300px;
height:20px;
line-height: 20px;
font-size: 20px;
width:100px;
/*border:1px red solid;*/
-webkit-box-reflect:right 6px -webkit-linear-gradient(top,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 90%);}
</style>
<div class="box3">
</div>
<div class="box4">倒影倒影倒影</div>
</body>
</html>
