CSS3 问题：如何在 div 的顶部没有盒子阴影？答案

【问题标题】：CSS3 Question: how to have no box shadow on the top of a div?CSS3 问题：如何在 div 的顶部没有盒子阴影？
【发布时间】：2011-04-14 15:07:57
【问题描述】：

现在当我这样做时：

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

它在所有侧面都给出了一个盒子阴影。我想要它在 3 个侧面，但不是顶部。如何防止阴影出现在顶部？

【问题讨论】：

标签： css

【解决方案1】：

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;

【讨论】：

这会在底部产生一个太长的阴影。

【解决方案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/

【讨论】：

这远不如 Syafiq Zianal 的答案有用，因为它需要更多标记、更多 css 并且如果您无法完全控制标记，则根本无法工作。
您也可以对 z-index 使用同样的原理（切断阴影）。我使用 z-index 进行标签设置。只需确保包含 position 属性或 z-index 无效。
如果你想完全使用你现有的 box-shadow 但剪掉它的一部分，这会更有用。（Syafiq 的回答会移动阴影以移除“顶部”阴影，这仅适用于您对一侧稍大的阴影感到满意的情况）

【解决方案3】：

只要有一个vertical offset only：

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

这会将阴影向下移动，以减少顶部的阴影。您将不得不使用它才能在您的情况下以您想要的方式获得它。 This site 还提供了一些关于盒子阴影的重要信息，例如分层以及浏览器支持。

【讨论】：

cdeszaq 是正确的。您需要将中心向下移动一点，以更改 0 0 部分。
这实际上是 not 正确的，因为它会导致 bottom 阴影过大 5px。我认为 OP 所追求的正是他/她已经应用的阴影尺寸，只是没有顶部。
@robmclarty - 是的，我的解决方案并没有为 OP 的情况提供确切的解决方案，但改变阴影的想法是重要的部分。

【解决方案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>

【讨论】：