我怎样才能做到这一点？我希望我的元素看起来好像有阴影下划线。我不希望其他三个方面的阴影。
CSS Box阴影底部仅[重复]
您可以使用两个元素，一个在另一个内部，并给外部一个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/
尝试此操作以使盒子阴影完全受控。
<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>
这同样适用于外部盒子阴影。
做这个：
box-shadow: 0 4px 2px -2px gray;
实际上，这要简单得多，无论您将模糊设置为（第3个值），还是将色散（第4个值）设置为负值。
尝试这个
您可以在http://jsfiddle.net/wJ7qp/中看到它