关于CSS3倒影技术
最近看到一篇技术文章，关于CSS3的倒影技术文章，感觉非常的新颖，只要用到了两点，渐变和倒影，不过谷歌和火狐的写法是不一样。下面看案例：
谷歌写法：
-webkit-box-reflect: below 0pxdoem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#dog{
border-radius: 15px;
border: solid 10px darkgrey;
width: 300px;
height: 247px;
-webkit-box-shadow: 15px 0px 20px -20px #444, -15px 0px 20px -20px #444;
box-shadow: 15px 0px 20px -20px #444, -15px 0px 20px -20px #444;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
position:relative;
}
</style>
</head>
<body>
<div id="dog">
<img src="dog1.jpg" alt="111111">
</div>
</body>
</html>火狐写法：用一个CSS伪类作为倒影，并且倒影的写法为：-moz-element
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#dog{
border-radius: 15px;
border: solid 10px darkgrey;
width: 300px;
height: 247px;
-webkit-box-shadow: 15px 0px 20px -20px #444, -15px 0px 20px -20px #444;
box-shadow: 15px 0px 20px -20px #444, -15px 0px 20px -20px #444;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
position:relative;
}
#dog:after{
background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#dog) 0px -127px no-repeat;
-moz-transform: scaleY(-1);
content: "";
height: 140px;
left: 0;
padding: 1px 0;
position: absolute;
top: 277px;
width: 360px;
}
</style>
</head>
<body>
<div id="dog">
<img src="dog1.jpg" alt="111111">
</div>
</body>
</html>