figma的drop shadow x:0 y:4 blur:6 spread:0 如何写成css样式

figma的drop shadow x:0 y:4 blur:6 spread:0 如何写成css样式

在CSS中，我们可以使用box-shadow属性来模拟Figma中的Drop Shadow效果。box-shadow属性接受的值分别是：横向偏移、纵向偏移、模糊半径、扩展半径和颜色。

但是，Figma的Drop Shadow有一个特殊之处在于它的X和Y偏移量都是0，这在CSS中表现为正常的阴影，而不是模糊的外阴影。

.shadow {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.5);
}

在这个例子中，我们设置了一个正常的阴影，没有模糊效果，颜色为黑色，透明度为50%。

如果你想要完全复制Figma中的阴影效果，你可能需要调整这些值以达到你想要的效果。

注意：Figma中的Drop Shadow有一个“Spread”的选项，但是这个选项在CSS中没有直接的对应，因此无法精确复制。你可以通过调整模糊半径和阴影颜色的深浅来模拟Spread效果。