这个问题已经在这里有一个答案：
我怎样才能做到这一点？我希望我的元素，看起来好像它有一个影子下划线。我不想为其他三面的影子。
做这个：
box-shadow: 0 4px 2px -2px gray;
它实际上更简单，不管你设置模糊到（第3个值），设定的价差（第4个值），以它的负面。
可以使用两个元件，一个在另一个内，并且具有底部填充一起得到外一个overflow: hidden和宽度等于内元件，使得对所有的其它侧的阴影是“切断”
#outer {
width: 100px;
overflow: hidden;
padding-bottom: 10px;
}
#outer > div {
width: 100px;
height: 100px;
background: orange;
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
可替代地，漂浮在外部元件以使其收缩到所述内元件的尺寸。请参阅：http://jsfiddle.net/QJPd5/1/
尝试这个
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
你可以看到它在http://jsfiddle.net/wJ7qp/
试试这个让你完全控制下的box-shadow。
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这将适用于外箱阴影，以及。