css实现盒子上移和盒子阴影效果

emmm，今天浏览网站，看见了一个还不错的效果。鼠标经过盒子，盒子向上移，而且有阴影，看起来效果不错。
话不多说，直接做。
首先，我给div盒子加上了margin属性，这样盒子上移就不会出现挡住其它内容和动不了的情况。

margin: 40px 0 0 40px;

然后使用鼠标经过：hover属性来进行控制。
我新建三个盒子，并设置浮动。

    <div class="aaa">
		我是内容。
	</div>
	<div class="bbb">
		我是内容。
	</div>
	<div class="ccc">
		我是内容。
	</div>

然后设置盒子的相关属性：

.aaa {
	margin: 40px 0 0 40px;
	width: 30%;
	height: 400px;
	float: left;
	border: 1px solid #333333;
	background-color: #E4393C;
}
.bbb {
	margin: 40px 0 0 40px;
	width: 30%;
	height: 400px;
	float: left;
	border: 1px solid #333333;
	background-color: #E4393C;
}
.ccc {
	margin: 40px 0 0 40px;
	width: 30%;
	height: 400px;
	float: left;
	border: 1px solid #333333;
	background-color: #E4393C;
}

最后使用box-shadow来为盒子加阴影：

.aaa:hover,.bbb:hover,.ccc:hover {
	margin: 20px 0 0 40px;
	box-shadow: 5px 8px 4px 2px #A9A9A9;
}

这样简单的效果就实现了。