具有分层框、更平滑的Css阴影效果

当光线照射到物体上并投射出阴影时，阴影会呈现出无数独特的特征。如果你试图用 then 捕捉真实阴影的微妙之处box-shadow，那么，你就很不走运了。cssbox-shadow属性并不是为了鼓励表现力而构建的。它实质上会产生对象的模糊轮廓——您可以更改其偏移量、模糊半径、扩散和颜色，仅此而已。我们无法接近表达现实生活中阴影的复杂性和细微差别。

但是通过简单的 CSS 技术，我们可以扩展我们的选择范围。如果我们使用 layered box-shadows，我们可以更细粒度地控制阴影的渲染方式：

看看与分层box-shadow效果（第二个框）相比，默认效果box-shadow（第一个框）看起来多么方形和笨拙。我们可以通过创建多个box-shadows（用逗号分隔每个阴影）并增加每个阴影的偏移和模糊来实现此效果（语法box-shadow为X-offset Y-offset blur color）：

/* Default box-shadow */
.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
 * shadows with gradually increasing radius and offset */
.shadow-5 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

这种简单的分层技术使我们能够更好地控制阴影的渲染，我们可以用它来微调锐度、距离和扩散。例如，您可以增加或减少阴影的数量以创建更小或更大的扩散。（请注意，如果您增加层数，如果您希望保持强度相同，则必须降低每层的 alpha 值。）

css代码如下：

.shadow-4 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 
              0 2px 2px rgba(0,0,0,0.15), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.15);
}

.shadow-6 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 8px 8px rgba(0,0,0,0.11), 
              0 16px 16px rgba(0,0,0,0.11), 
              0 32px 32px rgba(0,0,0,0.11);
}

控制清晰度就像控制扩散一样简单，但是我们可以同时使用每层的alpha值和模糊值来分别改变深度的浓度和阴影的模糊半径。

上面的示例对所有图层使用相同的 alpha 值，但我们可以让 alpha 值随着每一层而减少或增加，以创建或多或少的漫射阴影。对于下面更集中的阴影，最里面的阴影（偏移和模糊最少）具有最高的 alpha 值，并且随着每一层的增加而减小。对于第二个盒子的更漫射阴影，情况正好相反，其中最内层具有最低的 alpha 值：

css代码如下：

.blog-shadow-sharp {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}

.blog-shadow-diffuse {
    box-shadow: 0 1px 1px rgba(0,0,0,0.08), 
                0 2px 2px rgba(0,0,0,0.12), 
                0 4px 4px rgba(0,0,0,0.16), 
                0 8px 8px rgba(0,0,0,0.20);
}

我们还可以增加blur更高的增量，以增加传播并创造更柔和、几乎梦幻的效果：

css代码如下：

.blog-shadow-dreamy {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}

最后，我们可以通过解耦模糊半径和 Y 偏移来控制距离，并以更大或更小的增量增加偏移：

css代码如下：

.shadow-shorter {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
}

.shadow-longer {
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
}

使用所有这些技术的哪种组合当然在很大程度上取决于您所处的环境，但是使用分层阴影我们至少可以获得更多控制以帮助我们实现所需的外观和感觉。

翻译来自：https://tobiasahlin.com/blog/layered-smooth-box-shadows/

链接: https://www.fly63.com/article/detial/12497