用 Box Shadow 营造立体感

Box Shadow 通过在元素周围添加阴影来营造立体感。它能让元素更突出，也让设计更现代、更有层次。

​

工作方式

一个阴影由多个设置共同决定其外观和表现。

​

阴影设置

​

Preset

• 快速应用现成的阴影样式（比如 Small、Medium、Large）
• 适合追求速度和一致性的设计

​

Type

• Outer Shadow：阴影在元素外部（最常见）
• Inner Shadow：阴影在元素内部

​

Size（X 与 Y）

• 控制阴影的位置
• X（水平）：向左或向右移动
• Y（垂直）：向上或向下移动

👉 示例：

• X 为 0，Y 为 4：阴影略微落在元素下方

​

Blur

• 控制阴影的柔和程度

👉 数值越大，阴影越柔和
👉 数值越小，阴影越锐利

​

Spread

• 控制阴影扩散的范围

👉 正值：阴影更大
👉 负值：阴影更收紧

​

Color

• 设置阴影颜色，通常是带透明度的黑色或灰色

👉 常用值：rgba(0, 0, 0, 0.1–0.3)，适合柔和的阴影

​

多重阴影

• 点击 + Add 可以叠加多个阴影
• 适合更复杂、有层次的效果