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

要获得想要的效果，实际上很简单：

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>

Answer 2

您已经做得很好。唯一需要做的修改是制作一个没有x或y偏移且没有更多“模糊”的盒子阴影。

基本用法：

box-shadow: h-offset v-offset blur spread color;

有关该主题的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

或者只是使用发电机！ https://www.cssmatic.com/box-shadow

div {
  padding: 15px;
  margin: 15px;
  box-shadow: 0px 0px 10px #E6E6E6, 0px 0px 0px #E6E6E6, 0px 0px 0px #E6E6E6, 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 3

使用此：

border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);