【css】box-shadow: 三行跟一行的区别，有必要写三行阴影效果么？

styled components 的样式写法中：

box-shadow: 
    0px 3px 1px -2px rgba(0,0,0,0.2),
    0px 2px 2px 0px rgba(0,0,0,0.14),
    0px 1px 5px 0px rgba(0,0,0,0.12);

在使用 styled-components 或其他 CSS-in-JS 解决方案时，box-shadow 的写法取决于你想要实现的视觉效果。

三行和一行的区别

• 写三行（如示例中的写法） ：

  box-shadow: 
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  

  这种写法表示一个组合的多重阴影效果，其中每一行是一个单独的阴影规则：

  • 第一行阴影的作用是高光或主阴影，通常更柔和、扩散面积大。
  • 第二行阴影增加深度和层次感。
  • 第三行阴影是细微的边界细节。

  这种写法适用于需要复杂的阴影效果（比如类似 Material Design 风格的阴影）。

• 写一行：

  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
  

  只定义一个单一的阴影，简单直接。适合较轻的样式需求，或者不需要太多层次感的设计。

哪种写法更合适？

1. 需要多重阴影的复杂效果：
   保持三行写法（可以写成一行或分行书写，不影响效果），用于强调层次感和精致的设计细节。
2. 简单样式需求：
   使用单一的阴影即可，既简洁又利于性能优化。

最佳实践

如果你确实需要多重阴影，可以在 styled-components 中优雅地使用模板字符串，使代码更易读：

const StyledBox = styled.div`
  box-shadow: 
    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
`;

如果只需要简单阴影，可以直接简化为一条：

const StyledBox = styled.div`
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2);
`;