當我這樣做的時候:

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

它在所有的邊上給出一個盒子陰影。我要它有三面，但不是上面。如何防止頂部出現陰影？

方框陰影支持多個逗號，這意味著這是可能的，可以這樣做:

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

第一組把陰影帶到右邊。底部，而第二組把陰影帶到左邊(使用負值)& amp底部。

跨瀏覽器支持的完整代碼是:

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

如果您可以嵌套兩個div，那么您應該能夠使用邊距和溢出:隱藏的組合來“砍掉”頂部陰影，而不會失去其他邊緣所需的效果。

例如:

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

只有垂直偏移:

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

這將向下移動陰影，這樣頂部的陰影就少了。在你的情況下，你必須按照你想要的方式去玩它。這個網站也有一些關于框陰影的很好的信息，比如分層，以及瀏覽器支持。

使用偽元素來覆蓋不想有陰影的元素的邊緣。這類似于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  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>