CSS 仅将阴影应用于边框顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9792816/
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
apply drop shadow to border-top only?
提问by AMC
How do you apply a drop shadow to a specific border edge?
如何将阴影应用到特定的边框边缘？
For example, I have the following code:
例如，我有以下代码：
header nav {
border-top: 1px solid #202020;
margin-top: 25px;
width: 158px;
padding-top:25px;
}
I want a drop shadow (1px 1px 1px #cdcdcd) applied only to border-top.
我想要一个仅应用于边框顶部的阴影（1px 1px 1px #cdcdcd）。
What's the best way to achieve this?
实现这一目标的最佳方法是什么？
EDIT
编辑
This is essentially what I'm looking for
这基本上就是我要找的
div {
border-top: 1px solid #202020;
margin-top: 25px;
margin-left:25px;
width: 158px;
padding-top:25px;
-webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
}
However, the shadow seems to be impacted by the padding. Is there anyway to attach the shadow to the border alone without adjusting the padding?
但是，阴影似乎受到填充的影响。无论如何，是否可以在不调整填充的情况下将阴影单独附加到边框？
回答by danblundell
Something like this?
像这样的东西？
div {
border: 1px solid #202020;
margin-top: 25px;
margin-left: 25px;
width: 158px;
height: 158px;
padding-top: 25px;
-webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}<div></div>回答by dnlmzw
In case you want to apply the shadow to the inside of the element (inset) but only want it to appear on one single side you can define a negative value to the "spread" parameter (5th parameter in the second example).
如果您想将阴影应用于元素 ( inset)的内部，但只希望它出现在一侧，您可以为“spread”参数（第二个示例中的第 5 个参数）定义一个负值。
To completely remove it, make it the same size as the shadows blur (4th parameter in the second example) but as a negative value.
要完全删除它，请使其大小与阴影模糊（第二个示例中的第四个参数）相同，但为负值。
Also remember to add the offset to the y-position (3rd parameter in the second example) so that the following:
还要记住将偏移量添加到 y 位置（第二个示例中的第三个参数），以便：
box-shadow: inset 0px 4px 3px rgba(50, 50, 50, 0.75);
becomes:
变成：
box-shadow: inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);
Check this updated fiddle: http://jsfiddle.net/FrEnY/1282/and more on the box-shadow parameters here: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
检查这个更新的小提琴：http: //jsfiddle.net/FrEnY/1282/以及更多关于 box-shadow 参数的信息：http: //www.w3schools.com/cssref/css3_pr_box-shadow.asp
回答by Ben Clayton
The simple answer is that you can't. box-shadow applies to the whole element only. You could use a different approach and use ::before in CSS to insert an 1-pixel high element into header nav and set the box-shadow on that instead.
简单的答案是你不能。box-shadow 仅适用于整个元素。您可以使用不同的方法并在 CSS 中使用 ::before 将一个 1 像素高的元素插入到标题导航中，并在其上设置框阴影。
回答by shipwreck
I find using these interactive tools help visualize what's happening, and whats possible
我发现使用这些交互式工具有助于可视化正在发生的事情以及可能发生的事情
http://css3gen.com/box-shadow/
http://css3gen.com/box-shadow/
http://www.cssmatic.com/box-shadow
http://www.cssmatic.com/box-shadow
Edit: Check out the other tools for experimenting with the other generators and combinations. I have to remind myself sometimes that just because you can, doesn't mean you should - its easy to get carried away!
编辑：查看其他工具以试验其他生成器和组合。有时我不得不提醒自己，仅仅因为你可以，并不意味着你应该 - 这很容易忘乎所以！
回答by shaunw
Multiple box shadows did it for me.
多个框阴影为我做到了。
box-shadow:
inset 0 -8px 4px 4px rgb(255,255,255),
inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);
回答by Arthur Yakovlev
.item .content{
width: 94.1%;
background: #2d2d2d;
padding: 3%;
border-top: solid 1px #000;
position: relative;
}
.item .content:before{
content: "";
display: block;
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 1px;
-webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1);
-moz-box-shadow: 0px 1px 13px rgba(255,255,255,1);
box-shadow: 0px 1px 13px rgba(255,255,255,1);
z-index: 100;
}
I am like using something like it for it.
我喜欢为它使用类似的东西。
