> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 用 Box Shadow 营造立体感

> 用 Box Shadow 为元素添加阴影营造立体感：选择预设或内外阴影，调整 X/Y 偏移、Blur、Spread 和颜色，还能叠加多重阴影。

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

### 工作方式

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

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/image-16.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=4fa841d790f27152d6791691abfbb96e" alt="右侧面板中的 Box Shadow 设置" width="586" height="366" data-path="images/image-16.png" />
</Frame>

## 阴影设置

### Preset

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

### Type

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

### Size（X 与 Y）

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

👉 示例：

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

### Blur

* 控制阴影的柔和程度

👉 数值越大，阴影越柔和<br />👉 数值越小，阴影越锐利

### Spread

* 控制阴影扩散的范围

👉 正值：阴影更大<br />👉 负值：阴影更收紧

### Color

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

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

## 多重阴影

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.