用途
该技能用于指导实现 Material Design 3（M3）Expressive 的形状与容器（containment）原则，目标是创建友好、易接近且视觉上独特的界面。关键词包括：Material Design 3、M3、shape、圆角、border radius、containment、容器、形状变形、组件形状。
核心原则
M3 Expressive 使用形状来：
- 创造个性：独特的形状让界面更易记忆、更易接近。
- 建立层级：不同的圆角半径表示重要性与容器层级。
- 表达品牌：形状语言可定制以匹配品牌识别。
- 引导注意力：圆角自然吸引视线，令人感到友好。
- 支持交互：形状变形提供视觉反馈。
形状特征包括：圆角（主要特征，M3 偏好圆角而非尖角，不同组件类型使用不同半径）、形状变形（形状可在状态间动态转换，圆角半径可平滑动画）、非对称（并非所有角都需要相同半径，策略性非对称可增加趣味，但应谨慎用于特殊强调）。
形状尺度系统
M3 Expressive 定义了带语义命名并扩展了圆角半径令牌的形状尺度：
- None（0dp）：全出血表面、应用背景，无需圆角。
- Extra Small（4dp）：小按钮、Chips、徽章、输入框。
- Small（8dp）：文本按钮、描边按钮、小卡片。
- Medium（12dp）：标准按钮、卡片、底部面板。
- Large（20dp，从 16dp 更新）：大卡片、特色内容、FAB。
- Extra Large（32dp，从 28dp 更新）：主视觉卡片、特色图片、特殊容器、对话框。
- Extra Extra Large（48dp，M3 Expressive 新增）：模态面板、全屏覆盖层、主要主视觉元素。
- Full（圆角半径的 100%，现定义为 100% 而非 50%）：药丸形、圆形按钮、头像、完全圆角元素。
形状令牌通过 CSS 自定义属性定义，资料给出了完整的 :root 令牌示例，包括各圆角半径以及组件级形状映射（按钮、卡片、对话框、FAB、Chip、文本框、底部面板）。
表现性形状库
M3 Expressive 引入了 35 种装饰性与功能性形状，超越简单圆角矩形，可应用于组件、背景和装饰元素，并支持彼此之间的平滑变形。完整目录包括：
- 几何形状：Circle、Square、Slanted Square、Oval、Pill、Semi Circle、Triangle、Diamond、Pentagon、Gem、Arch。
- 有机与趣味形状：Flower、Puffy、Puffy Diamond、Clover 4、Clover 8、Bun、Heart、Ghostish、Clam Shell。
- 爆发与星形：Sunny、Very Sunny、Burst、Soft Burst、Boom、Soft Boom、Fan、Arrow。
- Cookie 形状（扇贝边）：Cookie 4、Cookie 6、Cookie 7、Cookie 9、Cookie 12。
- 像素形状：Pixel Circle、Pixel Triangle。
使用时机：用于愉悦时刻（加载状态、庆祝、引导流程）、品牌表达、状态反馈（如圆形在完成时变形为爆发形）、视觉张力（结合尖锐与圆润、对称与非对称），并应谨慎使用以保持清晰——抽象形状（Burst、Puffy、Flower）用于强调，而非作为内容的主要容器。
资料提供了用 clip-path 和 border-radius 实现表现性形状的 CSS 示例（如 flower、bun、heart）。
组件形状指南
- 按钮：填充按钮、描边按钮、文本按钮均使用 Full（50%）圆角；填充按钮标准高度 40dp。FAB：Medium FAB 40×40dp、12dp 半径（替代已弃用的 Small FAB）；Regular FAB 56×56dp、20dp 半径；Large FAB 96×96dp、32dp 半径。
- 卡片：标准卡片 12dp（medium）圆角，四角一致，带阴影高度；Elevated 卡片半径相同并增加阴影；Outlined 卡片用 1px 描边替代高度，圆角相同。
- 对话框与面板：对话框 32dp（extra-large，从 28dp 更新），居中显示；底部面板顶部圆角 48dp（extra-extra-large，新增），底部 0dp，从底部滑入；侧边面板前缘 32dp，后缘 0dp。
- 输入框：填充文本框顶部 4dp（extra-small）、底部 0dp，形成输入槽外观；描边文本框四角 4dp。
- Chips：输入 Chip、过滤 Chip、建议 Chip 均为 8dp（small）圆角。
容器原则
容器层级：Level 0（背景）无或最小圆角（0–4dp），全屏表面、应用背景；Level 1（主容器）12dp，卡片、列表项、主要内容区；Level 2（次级容器）12–16dp，嵌套卡片、分组内容；Level 3（三级容器）16–28dp，对话框、模态、覆盖内容。
分组组件：相邻按钮可保持各自半径或合并为共享半径的单一容器；分段按钮首项左侧圆角、右侧方角，中间两侧方角，末项左侧方角、右侧圆角（资料给出对应 CSS）；工具栏与应用栏：顶部应用栏 0dp（或底部小半径），底部应用栏 0dp（或顶部小半径），FAB 可超出应用栏。
形状变形
形状可在状态间变形以显示关系，资料给出按钮按下、容器展开、形状转换（FAB 变形为面板）的 CSS 过渡示例，以及表现性形状变形的加载状态与交互反馈示例（使用 Web Animations API）。变形指南：用变形连接用户操作与界面反馈；形状不应承载字面含义，而是增加美学变化并引导注意力；结合尖锐与圆润形式制造动态视觉张力；谨慎使用抽象形状以保持清晰与可用性；将形状变形与 M3 动效物理系统配对以获得自然过渡。
高级技巧
包括非对称形状（如 border-radius: 28px 12px 28px 12px）、自定义形状（切角形状、缺口形状）、响应式形状（随屏幕尺寸调整圆角，资料给出 600px 与 1024px 断点示例）。
最佳实践
应做：使用语义形状令牌而非硬编码值；相似组件保持一致；根据组件尺寸调整半径（越大半径越大）；平滑动画形状过渡；考虑触摸目标（最小 48×48dp）；药丸按钮使用全半径；覆盖内容（对话框、面板）使用更大半径。
不应做：在同一组件族中混用尖角与圆角；使用过多不同半径（坚持尺度系统）；给微小组件配巨大半径；忘记随圆角调整内边距；除非特别需要否则使用方角；忽略形状尺度系统；不考虑性能就动画 border-radius。
无障碍与性能
无障碍：确保交互元素满足最小尺寸（资料给出 48×48dp 触摸目标示例）；形状不应遮挡焦点（给出 :focus-visible 示例）；高对比度下确保形状可见，使用边框或描边，不单纯依赖细微阴影。
性能：简单圆角用 border-radius（GPU 加速）；谨慎使用 clip-path（可能开销较大）；复杂变形用 will-change 动画形状变化；避免同时动画大量元素的 border-radius。资料给出优化复杂形状动画的 CSS 示例。
实现检查清单
资料提供了一份检查清单，涵盖：定义所有形状令牌（extra-small 到 extra-extra-large 及 full）；使用更新后的圆角值（Large 20dp、XL 32dp、XXL 48dp）；使用语义令牌；按钮全半径；卡片 medium 12dp；对话框 extra-large 32dp；底部面板顶部 extra-extra-large 48dp；输入框 extra-small 4dp；Chips small 8dp；FAB 按尺寸使用合适半径（Medium 12dp、Regular 20dp、Large 32dp）；分组组件正确处理共享边；形状过渡平滑且基于弹簧；在愉悦时刻使用 35 形状库中的表现性形状；适当时应用表现性形状变形作为状态反馈；触摸目标满足 48×48dp；焦点指示尊重圆角；性能优化（GPU 加速）；针对不同屏幕尺寸的响应式调整。
资源
资料列出：examples/shape-corners.svg（展示完整 M3 形状系统的视觉参考 SVG，基于 https://m3.material.io/styles/shape/overview-principles）；M3 形状概览 https://m3.material.io/styles/shape/overview；Material Design Tokens（shape）https://github.com/material-foundation/material-tokens。
限制
资料未提供该技能的安装命令、运行环境要求、收费或价格信息、具体平台支持范围，以及除上述资源外的其他使用步骤，这些内容暂未提供。