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方法所产生的效果相同。不过,由于该方法是以牺牲内容结构为代价而获取的,因此不推荐使用。

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

Subscribe to Chuan's blog