使用css box shadow属性提供divs深度

使用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>

你已经做得很好了。唯一需要修改的是生成一个没有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>

使用此:

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