使用 css box-shadow 属性赋予 div 深度

Question

我正在尝试获得这种效果：

到目前为止，我有这个，但我无法得到正确的阴影，为什么大多数例子都有rgb而不是十六进制？

div {
  margin: 16px 0;
  box-shadow: 2px 2px 5px #E6E6E6, 0px 0px 0px #E6E6E6, 0px 0px 0px #E6E6E6;
  border-radius: 4px;
}

<div>One</div>
<div>One</div>
<div>Three</div>

Answer 1

使用 RGBA 颜色在 box-shadows 中更常见的原因是因为它会与背景很好地融合。通过使用颜色，当框阴影颜色的亮度高于（即更亮）背景时，您可能最终会产生“发光”效果。

要得到你想要的效果，其实很简单：

1. 您使用一个完全没有偏移的通用框阴影，为所有 4 个边缘提供某种阴影
2. 您使用偏移几个像素的第二个框阴影来提供阴影的方向性，然后提供深度效果

摸索实际不透明度主要是一个反复试验的事情。请参阅下面的概念验证：

div {
  margin: 16px 0;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.1);
  border-radius: 4px;
  padding: 16px;
  width: 160px;
}

<div>One</div>
<div>One</div>
<div>Three</div>