CSS: 用box-shadow实现相邻div的阴影效果

在CSS3中,box-shadow可用于给界面元素添加阴影效果,比如:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
box-shadow: 10px 10px 5px #888888;  
}
</style>  
</head>  
<body>  
<div id="div1"></div>  
</body>  
</html>  

产生的效果为: css box-shadow

如果调整box-shadow的属性值,可以产生垂直阴影的效果:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
box-shadow: 0px 10px 5px #888888;  
}
</style>  
</head>  
<body>  
<div id="div1"></div>  
</body>  
</html>  

效果为: css vertical box-shadow

此时,如果在div1的下方添加一个div元素(div2),那么div1的阴影效果将被div2所遮蔽:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
box-shadow: 0px 10px 5px #888888;  
}
#div2 {
width:300px;  
height:100px;  
background-color:yellow;  
}
</style>  
</head>  
<body>  
<div id="div1"></div>  
<div id="div2"></div>  
</body>  
</html>  

效果为:

原因很简单,在DOM树中div2位于div1之后,因此div2所在的“层”位于div1之上,所以遮蔽了div1的阴影效果。如果定义阴影效果的是div2,那么该效果将不会被div1所遮蔽:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
}
#div2 {
width:300px;  
height:100px;  
background-color:yellow;  
box-shadow: 0px -10px 5px #888888;  
}
</style>  
</head>  
<body>  
<div id="div1"></div>  
<div id="div2"></div>  
</body>  
</html>  

效果为:

如果需要显示div1的阴影效果的话,可以将div1的z-index值人为提高,并将div1的position值设置为relative (z-index属性只在position值为absolute、relative或fixed的情况下才起作用):

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
box-shadow: 0px 10px 5px #888888;  
z-index:4;  
position:relative;  
}
#div2 {
width:300px;  
height:100px;  
background-color:yellow;  
}
</style>  
</head>  
<body>  
<div id="div1"></div>  
<div id="div2"></div>  
</body>  
</html>  

效果为:

另一种模拟产生相邻div阴影效果的方法是将div2设置为div1的父元素,并给两者设定一个相同的宽度:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#div1 {
width:300px;  
height:100px;  
background-color:blue;  
box-shadow: 0px 10px 5px #888888;  
}
#div2 {
width:300px;  
height:200px;  
background-color:yellow;  
}
</style>  
</head>  
<body>  
<div id="div2">  
<div id="div1"></div>  
</div>  
</body>  
</html>  

上述代码产生的效果与调整div1的z-index方法所产生的效果相同。不过,由于该方法是以牺牲内容结构为代价而获取的,因此不推荐使用。