#div7{
border: 5px solid blue;
width: 280px;
height: 280px;
margin-top:20px ;
margin-left:145px;
box-shadow: 0px 0px 00px 10px #f00,0px 0px 00px 20px #fc0 , 0px 0px 00px 30px #ff0,
0px 0px 00px 40px #0f0, 0px 0px 00px 50px #0fe, 0px 0px 00px 60px #00f, 0px 0px 00px 70px #f0f ;
border: 5px solid blue;
width: 280px;
height: 280px;
margin-top:20px ;
margin-left:145px;
box-shadow: 0px 0px 00px 10px #f00,0px 0px 00px 20px #fc0 , 0px 0px 00px 30px #ff0,
0px 0px 00px 40px #0f0, 0px 0px 00px 50px #0fe, 0px 0px 00px 60px #00f, 0px 0px 00px 70px #f0f ;
}
<div id="div7">css3加多层阴影</div>
解释分析:box-shadow:0px(水平偏移值) 0px (垂直偏移值)00px (阴影模糊程度)10px (阴影扩展范围)#f00,