CSS 中平滑逼真阴影的大师指南

在本文中，你将了解 CSS 阴影的平滑效果及其简单的使用方法。但首先

什么是阴影？
当光线照射到物体上时，就会形成阴影。我们周围看到的阴影也遵循同样的原理，但它们非常复杂且逼真，因为它们没有特定的形状、长度或大小。它们可以呈现任何形状，也可以朝任何方向投射。为了在网站上使用 CSS 创建阴影，我们使用box-shadow属性。

例如box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);

但是，如果您尝试通过box-shadow属性来创建真实的阴影，那么您就不能。

为什么？
为了理解“为什么”，你必须理解 box-shadow 属性的工作原理。
box-shadow该属性只会生成一个模糊的物体轮廓。你只能改变它的长度、颜色、模糊度、扩散度和偏移量，其他什么都做不了。所以，你可能没办法通过该属性创建像Natural Super 那样复杂的真实阴影box-shadow。

但出乎意料的是，还有一种方法！
如果我们使用一种简单的技巧，就能获得更多控制权，扩大我们的选择范围。这种技巧就是使用“分层阴影”。我们可以在一个简单的box-shadow属性中定义多个阴影，使用逗号分隔，并逐渐增加模糊半径和偏移量，以使阴影更加逼真。以下是一个例子：

正常box-shadow⏬

分层box-shadow⏬

正如您所见，阴影的差异显而易见。您可以进一步自定义，以生成更多变化的阴影，例如锐利阴影、梦幻阴影、长阴影等等。


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

/* Layered Box-shadow */
box-shadow:
     0 3.9px 4.6px rgba(0, 0, 0, 0.08),
     0 12.3px 8.4px rgba(0, 0, 0, 0.056),
     0 18.8px 19.2px rgba(0, 0, 0, 0.037),
     0 22px 40px rgba(0, 0, 0, 0.019)
;