用途:帮助开发者为组件、容器和表单元素应用 SGDS 圆角设计令牌。
前置条件:需先完成 sgds-utilities-setup 技能的配置;无需主题文件即可使用。
核心概念:SGDS 提供两套独立的圆角令牌体系。通用体系 sgds:rounded-{size} 用于 div、容器、按钮、徽章、头像等非表单元素;表单体系 sgds:rounded-form-{size} 仅用于原生 HTML 表单元素(input、select、textarea、form)。默认使用通用令牌,仅当元素为原生表单控件时改用表单令牌。
通用圆角:支持全角 sgds:rounded-none(0px)、sm(2px)、默认 rounded(4px)、md(6px)、lg(8px)、xl(12px)、2-xl(16px)、3-xl(24px)、full(9999px,胶囊/圆形);支持按边 rounded-t/b/l/r-;也支持单角 rounded-tl/tr/br/bl-。常见用途:none 用于表格单元格直角,sm 用于标签,默认用于标准按钮,md 用于卡片面板,lg 用于较大卡片与模态框,xl 用于特色卡片,2-xl 用于大容器,3-xl 用于主视觉区块,full 用于徽章、头像、胶囊按钮。
表单圆角:仅用于原生表单元素,类名包括 sgds:rounded-form-none、xs、sm、md(标准默认)、full(胶囊形搜索/筛选输入)。官方提示:当存在 <sgds-input>、<sgds-select> 等库组件时应优先使用库组件,表单令牌用于库组件无法满足需求的自定义表单元素。
排障:圆角不显示时检查父元素是否有 overflow: hidden 裁剪圆角,并确保元素有明确宽高;对非正方形元素使用 sgds:rounded-full 会得到椭圆而非正圆,需设置相等宽高;若表单控件圆角与周围输入框不一致,确认使用的是 sgds:rounded-form-* 而非通用 sgds:rounded-*。相关技能:utilities-border-color、utilities-border-width。