Css 是否仅对边框顶部应用阴影？

如何将放置阴影应用于特定的边界边

例如，我有以下代码：

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

但是，阴影似乎受到填充的影响。是否可以在不调整填充的情况下将阴影单独附加到边框上？

类似的内容

div{
边框：1px实心#202020；
边缘顶部：25px；
左边距：25px；
宽度：158px；
高度：158px；
填充顶部：25px；
-网络工具包盒阴影：0px-4px3pxRGBA（50,50,50,0.75）；
-moz盒阴影：0px-4px3pxRGBA（50,50,50,0.75）；
盒子阴影：0px-4px3pxRGBA（50,50,50,0.75）；
}

---

简单的答案是你不能。框阴影仅适用于整个元素。您可以使用另一种方法，在CSS中使用：：before将一个1像素高的元素插入标题导航，并在其上设置框阴影。

我发现使用这些交互式工具有助于可视化正在发生的事情以及可能发生的事情

---

编辑：查看其他用于试验其他生成器和组合的工具。有时我不得不提醒自己，仅仅因为你可以，并不意味着你应该——这很容易让人忘乎所以

多框阴影为我做到了这一点

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

---

如果您希望将阴影应用于元素内部（

插图

），但只希望阴影出现在单面，则可以为“spread”参数（第二个示例中的第5个参数）定义负值

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

还要记住将偏移添加到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);

选中此更新的fiddle:以及更多有关方框阴影参数的信息：

---

我喜欢使用类似的东西。

基本上，是的。但是，我需要它在边界顶部的下面。这可能吗？啊，很好。我编辑了danblundell的小提琴，使用“inset”属性使阴影位于内部。检查这个：这比我的另一个使用：：before的建议更简单。有没有可能消除从左右两侧下方溢出的阴影？我正在寻找一种方法，使阴影从上边框下方开始，然后向上向外。我需要如何从另一面剪裁阴影吗？请记住，虽然W3希望使用双冒号（

：
：before
）符号来区分psuedo元素，但IE似乎仍然存在问题，需要单冒号版本（
：before
）。谢谢@David。总是这样的，不是吗？
.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;
}