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效果。