For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/foundations/shape-and-elevation.md.
  • 简体中文
  • next
  • 形状与阴影

    形状用于表达层级:控件使用紧凑圆角,内容表面使用中等圆角,完整应用外壳使用最大圆角。阴影只用于浮动或重叠表面。

    Live previewHTML · CSS · JavaScript
    控件
    --radius-md
    表面
    --radius-xl
    应用外壳
    --a3s-radius

    圆角

    令牌默认值用途
    --radius-sm基础值减 4pxBadge 与微型控件
    --radius-md基础值减 2pxButton、Input 与导航项
    --radius-lg基础圆角Toolbar 与侧边导航
    --radius-xl基础值加 4pxCard 与 Panel
    --a3s-radius16px应用外壳与产品框架

    阴影层级

    令牌用途
    --shadow-xsInput 与 Card 的边缘分离
    --a3s-shadow-soft悬停 Resource Card 与紧凑浮层
    --a3s-shadow模态 Dialog 与大型浮动面板

    边框是默认分隔方式。不要给每张卡片都添加阴影;阴影必须对应真实层级变化。