仅对border-top应用阴影效果？

Question

如何为特定的边框应用阴影效果？

例如，我有以下代码:

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

我希望只在上边框应用一个1像素的阴影效果（颜色为#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);
}

然而，阴影似乎会受到填充的影响。有没有办法只将阴影附加到边框而不调整填充？

- AMC

Answer 1

像这样的吗？

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>

- danblundell

---

基本上是的。 但是，我需要它在border-top的下方。这可能吗？ - AMC

啊，太好了。我编辑了danblundell的小提琴，使用了“inset”属性，使阴影在内部。看看这个：http://jsfiddle.net/FrEnY/4/ 这比我之前建议使用::before更简单。 - Ben Clayton

有没有可能消除阴影从右侧和左侧溢出的情况？我正在寻找一种方法，使阴影从顶部边框下方开始向上并仅向外延伸。我需要以某种方式从其他侧面剪切阴影吗？ - 425nesp

Answer 2

如果您希望将阴影应用于元素的内部（inset），但只想在一个侧面上出现，您可以为“spread”参数（第二个示例中的第5个参数）定义负值。

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

还要记得将偏移量添加到y位置（第二个示例中的第3个参数），以使以下内容：

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/ ，更多有关box-shadow参数的内容，请参考这里：http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

- dnlmzw

Answer 3

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

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

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

http://css3generator.com/

编辑：请查看其他工具，以尝试其他生成器和组合。有时我必须提醒自己，仅仅因为你可以做到，并不意味着你应该这样做——很容易被带走！

- shipwreck

Answer 4

简单地说，你无法对单个元素应用 box-shadow 效果。box-shadow 只能对整个元素应用。你可以使用 CSS 中的 ::before，在 header nav 中插入一个高为 1 像素的元素，然后在此元素上应用 box-shadow 效果。

- Ben Clayton

---

请注意，虽然W3希望使用双冒号(::before)符号来区分伪元素，但IE仍然存在问题，需要使用单冒号版本(:before)。 - David Thomas

谢谢 @David。总是IE的问题，不是吗？ - Ben Clayton

Answer 5

对我来说，多个盒阴影做到了这一点。

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/

- shaunw

---

很棒的解决方案！ - undefined

Answer 6

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

我喜欢使用类似它的东西来完成它。

- Arthur Yakovlev

Answer 7

我对只在盒子顶部添加阴影的解决方案：

body {
  background-color:lightgray;
}
.box {
    box-shadow: rgb(0 0 0 / 50%) 0px -6px 6px -6px;
    padding:10px;
    margin-top:10px;
    background-color:white;
}

<div class="box">Box with top shadow</div>

如果你想要一个底部阴影，只需执行以下操作：

box-shadow: 0 6px 6px -6px rgb(0 0 0 / 50%)

- Jette