CSS3问题:如何在div的顶部没有框影

Question

现在当我这样做的时候:

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

它给所有的边一个盒子阴影。我要三面都做，但不要在上面。如何防止阴影出现在顶部?

Answer 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;

Answer 2

如果你可以嵌套两个div，那么你应该能够使用边距和overflow:hidden的组合来"切掉"顶部阴影，而不会失去对其他边缘所需的效果。

例如

:

.outer {
  margin-top: 50px;
  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;
}

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

Answer 3

只有垂直偏移量:

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

这将向下移动阴影，使顶部有更少的阴影。在你的情况下，你必须玩弄它，让它变成你想要的样子。这个网站也有一些很棒的关于框阴影的信息，比如分层，以及浏览器的支持。

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>