使用z-index 来处理 (z-index必须在使用了position的情况下才有效)
参考http://stackoverflow.com/questions/5505118/css-box-shadow-hidden-z-index-does-not-fix
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .borderbox { -moz-background-clip: border; -webkit-background-clip: border-box; -o-background-clip: border-box; background-clip: border-box; } .div1 { position: relative; z-index: 2; height: 100px; width: 100px; background-color: yellow; box-shadow: 2px 2px 5px #D9D9D9; } .div2 { position: relative; z-index: 1; height: 100px; width: 100px; background-color: #E4FDFC; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>