<div class="lay-link">
				<ul class="clearfix">
					<li><a href=""><img src="images/link1.png" ></a></li>
					<li><a href=""><img src="images/link2.png" ></a></li>
					<li><a href=""><img src="images/link3.png" ></a></li>
					<li><a href=""><img src="images/link4.png" ></a></li>
					<li><a href=""><img src="images/link5.png" ></a></li>
				</ul>
			</div>

.lay-link {
	margin: 0 auto;
	height: 300px;
	width:1020px;
}
.lay-link ul li{
	position: relative;
	float: left;
	width: 20%;
}
.lay-link ul li img{
	-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%);
}
.lay-bar{
	display: inline-block;
	padding: 10px 65px;
	background-color: rgba(255,255,255,.2);
	border-radius: 30px;
}
.lay-bar *{
	display: inline-block;
	vertical-align: middle;
}

.lay-link ul li img:before {
	content:"";
	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(#imgbox) 0px 0px no-repeat;
	/*百分比为调倒影的透明度*/
	-moz-transform: scaleY(-1);
	padding: 1px 0px;
	background-origin: padding-box, content-box;
	background-clip: padding-box, content-box;
	position:absolute;
	height:340px;
	width: 340px;
	top: 194px;
	left:0px;
}