CSS Box-Shadow Generator

什么是 CSS box-shadow？

CSS 属性 box-shadow 为元素添加一个或多个阴影。阴影创建深度感，让卡片、按钮和对话框等元素从背景中突显出来。

box-shadow 语法

语法为：box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;。Offset-X 和 Offset-Y 决定阴影位置。模糊半径控制柔和度，扩展半径放大或缩小阴影。

创建出色阴影的技巧

• 使用不同模糊值的多个阴影可以获得更真实的效果。
• 保持阴影颜色微妙——使用透明的黑色而不是强烈的颜色。
• Inset 阴影非常适合按下状态的按钮和输入框。
• 在浅色和深色模式下都测试阴影，因为它们可能看起来不同。