* {
	padding:0;
	margin:0;
}
body {
	width:100%;
	height:100vh;
	/*//弹性盒子布局方式*/
    display:flex;
	/*容器内元素居中*/
    justify-content:center;
	align-items:center;
	background:#efeeee;
}
.container {
	width:700px;
	height:600px;
	display:flex;
	/*容器内元素之间环绕留有一定空间*/
    justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
}
.container .box {
	display:flex;
	justify-content:space-around;
	flex-direction:column;
	align-items:center;
	width:100px;
	height:140px;
	margin:20px;
}
.container .box .img {
	width:100px;
	height:100px;
	box-shadow:18px 18px 30px rgba(0,0,0,0.1),-18px -18px 30px rgba(255,255,255,1);
	border-radius:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#efeeee;
	transition:box-shadow .2s ease-out;
	position:relative;
}
.container .box .img img {
	width:60px;
	transition:width .2s ease-out;
	/*实现效果以及实现方向以及实现时间 ease-out代表过度效果*/
}
.container .box p {
	color:slategray;
}
.container .box .img:hover {
	box-shadow:0 0 0 rgba(0,0,0,0.1),0 0 0 rgba(255,255,255,1),inset 18px 18px 30px rgba(0,0,0,0.1),inset -18px -18px 30px rgba(255,255,255,1);
	/*内嵌投影值*/
    transition:box-shadow .2s ease-out;
}
.container .box .img:hover img {
	width:58px;
	transition:width .2s ease-out;
}