仅 CSS 框阴影底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4561097/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Box Shadow Bottom Only
提问by WillingLearner
How can I do this? I want my element to look as though it has a shadow underline. I don't want the shadow for the other 3 sides.
我怎样才能做到这一点？我希望我的元素看起来好像有一个阴影下划线。我不想要其他 3 边的阴影。
回答by Steve B
Do this:
做这个：
box-shadow: 0 4px 2px -2px gray;
It's actually much simpler, whatever you set the blur to (3rd value), set the spread (4th value) to the negative of it.
它实际上要简单得多，无论您将模糊设置为（第 3 个值），都将传播（第 4 个值）设置为它的负数。
回答by Yi Jiang
You can use two elements, one inside the other, and give the outer one overflow: hiddenand a width equal to the inner element together with a bottom padding so that the shadow on all the other sides are "cut off"
你可以使用两个元素，一个在另一个里面，给外部一个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);
}
Alternatively, float the outer element to cause it to shrink to the size of the inner element. See: http://jsfiddle.net/QJPd5/1/
或者，浮动外部元素以使其缩小到内部元素的大小。见：http: //jsfiddle.net/QJPd5/1/
回答by Nermien Barakat
Try this
尝试这个
-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);
You can see it in http://jsfiddle.net/wJ7qp/
您可以在http://jsfiddle.net/wJ7qp/ 中看到它
回答by Saeed Tavoosi
try this to get the box-shadow under your full control.
试试这个让你完全控制盒子阴影。
<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>
this would apply to outer box-shadow as well.
这也适用于外盒阴影。
