CSS3问题：如何使一个div顶部没有盒子阴影？

Question

现在我这样做：

-moz-box-shadow: 0 0 200px #00C0FF;
-webkit-box-shadow: 0 0 200px #00C0FF;
box-shadow: 0 0 200px #00C0FF;

它在所有边上都显示了一个盒子阴影。我想让它在三个边上，但不是顶部。如何防止阴影出现在顶部？

- Laila

Answer 1

box-shadow属性支持多个逗号，这意味着可以像下面这样实现：

box-shadow支持多个逗号，这意味着可以像下面这样实现：

box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

第一组阴影向右下角投射，而第二组阴影向左下角投射（通过使用负值）。

跨浏览器支持的完整代码为：

-moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
-webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;
box-shadow: 2px 2px 3px #888, -2px 2px 3px #888;

- Syafiq Freman

---

这会在底部产生一个过长的阴影。 - BadHorsie

Answer 2

如果你可以嵌套两个div，那么你应该能够使用外边距和overflow:hidden的组合来“削掉”顶部阴影，而不会丢失对其他边缘所需的效果。例如，这个标记：

<div class="outer">
    <div class="inner">hello</div>
</div>

还有这个 CSS：

.outer {
    margin-top: 200px;
    overflow: hidden;   
}

.inner {
    width:200px;
    height: 200px;
    margin: 0 200px 200px 200px;
    -moz-box-shadow: 0px 5px 200px #00C0FF;
    -webkit-box-shadow: 0px 5px 200px #00C0FF;
    box-shadow: 0px 5px 200px #00C0FF;
}

给出的结果为 - http://jsfiddle.net/ajcw/SLTE7/2/

- ajcw

---

这比Syafiq Zianal的答案要不太有用，因为它需要更多的标记、更多的CSS，并且如果您没有完全控制标记，则根本无法工作。 - Akrikos

你也可以使用同样的原则（切断阴影）来处理 z-index。我在我的选项卡设置中使用了 z-index。只需确保包含 position 属性，否则 z-index 将无效。 - Rokit

如果您想要精确使用现有的盒子阴影，但是需要剪裁其中的一部分，则这将非常有用。（Syafiq's答案移动阴影以删除“顶部”阴影，这只适用于您可以接受一侧略大的阴影。） - Secret

Answer 3

仅具有垂直偏移量的 阴影效果:

.shadow {
  -moz-box-shadow: 0px 5px 200px #00C0FF;
  -webkit-box-shadow: 0px 5px 200px #00C0FF;
  box-shadow: 0px 5px 200px #00C0FF;
}

这将使阴影向下移动，使顶部的阴影较少。在您的情况下，您需要调整它以使其符合您的要求。 此网站 还提供了一些关于盒子阴影的很好的信息，例如分层以及浏览器支持等。

- cdeszaq

---

cdeszaq是正确的。您需要通过更改0 0部分将中心向下移动一点。 - Edwin

这实际上是错误的，因为这会导致底部阴影增加5像素。我认为 OP 的意图是保持已应用的阴影尺寸，只是去掉了顶部。 - robmclarty

@robmclarty - 没错，我的解决方案并没有为OP的情况提供确切的解决方案，但是移动阴影的想法是重要的部分。 - cdeszaq

Answer 4

使用伪元素覆盖您不想有阴影的元素的边缘。这与ajcw的方法类似，但不需要每次手动添加额外的元素 - 只需在您的CSS中添加一次 - 并使用绝对定位，我认为这更加清晰。

.nav-link.active {
  position: relative;
  box-shadow: 0 0 5px #888;
}

.nav-link.active::after {
  position: absolute;
  content: ' ';
  height: 7px;
  bottom: -8px;
  left: -5px;
  right: -5px;
  background-color: white;
  
  /*this one's only needed because we don't want this pseudo-element to be clickable*/
  pointer-events: none; 
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="p-4">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab 3</a>
    </li>
  </ul>
</div>

- Jacob Stamm