容器阴影

容器阴影是一种为元素呈现阴影的视觉效果。您可以通过选择文本元素并导航到 样式面板 > 效果 > 容器阴影.

通过本指南，您将发现：

1. 如何生成容器阴影过渡
2. 如何制作容器阴影边框

实现容器阴影过渡的方法

您可以整合容器阴影过渡，这样当访问者与元素交互时，容器阴影就会改变其视觉显示。例如，您可以在元素上实现悬停效果，使容器阴影的色调在悬停时变暗：

1. 选择要包含容器阴影过渡的元素
2. 前往 样式面板 > 效果 > 容器阴影
3. 按 ”加”图标插入容器阴影
4. 修改 色调 调至黑色并加入 20% 不透明度
5. 将容器阴影合并到元素中，并使用黑色色调和 20% 不透明度进行设计
6. 选择 徘徊 来自 状态 下拉式菜单
7. 访问 样式面板 > 效果 > 容器阴影
8. 将容器阴影配置为 55% 不透明度
9. 选择 没有任何 来自 状态 下拉式菜单
10. 前往 样式面板 > 效果 > 过渡
11. 点击 ”加”图标插入过渡
12. 挑选 容器阴影 来自 类型 下拉式菜单
13. 建立一个 期间 或者保持默认的 200ms

应用过渡后，悬停效果将在 没有任何 国家和 徘徊 状态。如果没有 200 毫秒的过渡，悬停效果将在不同的不透明度级别之间突然转变。

制作容器阴影边框的方法

您可以在单个元素上应用多个容器阴影以产生不同的视觉效果。以下是利用多个容器阴影创建微妙边框和阴影的示例：

1. 选择要包含容器阴影过渡的元素
2. 去 样式面板 > 效果 > 容器阴影
3. 打 ”加”图标插入容器阴影
4. 挑选 外部 作为 类型
5. 调整 X 和 是 基于偏好的价值观
6. 放 模糊 至 0px
7. 放 尺寸 至 1 像素
8. 放 颜色 改为 rgba(0,0,0,0.1) – 黑色，不透明度为 10%
9. 将阴影的色调调整为 rgba(0, 0, 0, 0.1)（即不透明度为 10% 的黑色）
10. 访问 样式面板 > 效果 > 容器阴影
11. 按 ”加”图标插入另一个容器阴影
12. 放 模糊 改为 8px
13. 修改 X 和 是 基于偏好的价值观
14. 放 颜色 至 rgba(0, 0, 0, 0.1)