CSS如何在一个div元素的三个边上添加阴影？

Question

我想在一个div的三个边（除了顶部）有阴影效果。我该如何实现？

```

我想在一个div的三个边（除了顶部）有阴影效果。我该如何实现？

```

- user1117313

---

这是一个重复的问题，但我认为这个答案更好。它们可以合并吗？ - user736893

Answer 1

这里有一个JS Fiddle，它只使用了一个

标签来实现。

#shadowBox {
    background-color: #ddd;
    margin: 0px auto;
    padding: 10px;
    width: 220px;
    box-shadow: 0px 8px 10px gray, 
        -10px 8px 15px gray, 10px 8px 15px gray;
}

你设置了底部、左下角和右下角的阴影。对于软阴影来说，这有点棘手，但是它是可行的。只需要稍微猜一下中间阴影的模糊半径，使其看起来无缝并且当它与侧面阴影重叠时不会太暗。

- Chris C

---

只通过调整一个盒子阴影的 y 轴位置，你能得到同样的效果吗？ - Vigrond

@Vigrond 我试过了，但是阴影模糊的边缘并不够明显。你需要添加两个角落的阴影来使两侧更加均匀。 - Chris C

我认为这不是正确的答案，它似乎将三个独立的盒子阴影叠加在一起，使每个边缘比预期更暗。难道没有一种方法可以在每个侧面添加一个单独的阴影，或者一个可以覆盖所有三个的阴影吗？ - jenlampton

Answer 2

如果您正在寻找类似于Google材料设计阴影的东西：

.shadow1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.shadow2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.shadow3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.shadow4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.shadow5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

来源：https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d 这是一个免费的谷歌材料设计阴影辅助工具，它可以帮助您在网站或应用程序中添加漂亮的阴影效果。只需选择所需的阴影类型和深度，然后复制生成的CSS代码即可轻松实现。这个工具非常易于使用，并且可以节省您添加阴影效果的时间。

- Maciej Krawczyk

Answer 3

这是@Vigrond提出的负Y值的示例：

box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.15); 

- jenlampton

Answer 4

我喜欢@Chris C的回答，但我认为我们不需要第一行代码。这样更短，并且具有相同的效果：

box-shadow: -10px 8px 15px lightgray, /*left and bottom*/
            10px 8px 15px lightgray; /*right and bottom*/

#note{
 position: absolute;
 top: 20px; left: 30px;
 width:100px; height: 100px;
 background-color: #eee;
 box-shadow: -10px 8px 15px lightgray,
 10px 8px 15px lightgray;
}

<div id="note"></div>

- Nrc

Answer 5

如果您有一个坚实的背景颜色，那么您可以通过使用background-color和z-index的组合来实现这一点。诀窍是给具有box-shadow的元素及其前一个兄弟姿态，然后给前一个兄弟一个背景颜色，并将其设置为具有更高的z-index，以便它堆叠在具有box-shadow的元素上方，从而覆盖其顶部阴影。

您可以在此处查看演示：http://codepen.io/thdoan/pen/vNvpKv

如果没有立即前一个兄弟可用，则还可以使用伪元素，例如:before或:after：http://codepen.io/thdoan/pen/ojJEMj

- thdoan

---

似乎将卡片堆叠在另一张卡片上以掩盖阴影是一种hack方法。这可能会在其他断点处导致破损。 - dman

Answer 6

对于带有硬边的半透明阴影（即没有模糊半径），我使用了以下代码：

.shadow-no-top {
  position: relative;
  box-shadow: -5px 0 0 0 rgba(0,0,0,.2), 5px 0 0 0 rgba(0,0,0,.2);
}
.shadow-no-top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background-color: rgba(0,0,0,.2);
}

这里使用了左右部分的阴影，并将:after伪内容添加为底部的阴影。这样可以避免重叠，使阴影变得更深或者角落缺失。

然而，这确实需要元素的背景是纯色的。

- spikyjt