只将阴影应用于边框顶部？

例如，我有以下代码：

header nav { 
    border-top: 1px solid #202020; 
    margin-top: 25px; 
    width: 158px; 
    padding-top:25px; 
}

我想阴影（1px的1px的1px的#cdcdcd）仅适用于边框顶部。

达到此目的的最佳方法是什么？

编辑

实际上，这就是我要找的

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); 
}

然而，阴影似乎是由填充受到影响。无论如何，无需调整填充就可以将阴影贴在边框上吗？

来源

2012-03-20 AMC

这样的事情？

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); 
}

http://jsfiddle.net/FrEnY/

来源

2012-03-20 18:40:04 danblundell

基本上，是的。但是，我需要它在边界的底部。这可能吗？ – AMC 2012-03-20 18:49:26

啊，那很好。我编辑了danblundell的小提琴，以使用使插入阴影的'inset'属性。看看这个：http://jsfiddle.net/FrEnY/4/这比我之前使用:: before的其他建议更简单。 – 2012-03-21 22:02:25

简单的答案是，你不能。 box-shadow仅适用于整个元素。您可以使用不同的方法，并在CSS中使用:: before将一个1像素高的元素插入到header nav中，然后设置box-shadow。

来源

2012-03-20 18:41:00

你能举个例子吗？我对这一切都很陌生，对不起。 – AMC 2012-03-20 19:05:32

请记住，尽管W3想要使用双冒号（':: before'）符号来区分伪元素，但IE似乎仍然存在问题并且需要单冒号版本（'：before'）。 – 2012-03-20 19:08:07

谢谢@David。它总是IE不是吗？ – 2012-11-30 11:17:54

我发现使用这些互动工具帮助实现可视化所发生的事情，并且什么可能

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

编辑：检查出其他工具与其他发电机试验和组合。我必须提醒自己，有时候只是因为你可以，并不意味着你应该 - 容易被偷走！

来源

2013-12-28 19:11:57 shipwreck

多箱阴影为我做了。

box-shadow: 
     inset 0 -8px 4px 4px rgb(255,255,255), 
     inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

来源

2014-05-08 17:37:15 shaunw

如果你想申请的阴影元素（inset）内，但只希望它出现在一个单一的方面，你可以定义一个负值到“传播”参数（第二个例子中的第五个参数）。

要将其完全去除，请将其与阴影模糊（第二个示例中的第四个参数）的大小相同，但为负值。

还记得添加的偏移量y位置（第三参数在第二个例子），以便执行以下操作：

box-shadow:   inset 0px 4px 3px rgba(50, 50, 50, 0.75);

变为：

box-shadow:   inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

检查该更新的小提琴：http://jsfiddle.net/FrEnY/1282/以及更多关于这里的箱子阴影参数：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

来源

2014-06-10 11:44:26 dnlmzw

.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; 
}

我喜欢用它这样的东西。

来源

2015-05-06 21:48:45

只将阴影应用于边框顶部？

回答

相关问题