用途:帮助开发者控制边框厚度,以及元素哪些边显示边框。使用前需先完成 sgds-utilities-setup 技能要求的设置;边框宽度工具无需主题文件。
核心概念:边框宽度工具只管厚度和边,与边框颜色相互独立。要让边框可见,必须同时使用宽度类和颜色类;只用宽度会占位但不可见。
全边:sgds:border(四边1px)、sgds:border-0(无边框)、sgds:border-2(四边2px)、sgds:border-4(四边4px)、sgds:border-8(四边8px)。
单边:sgds:border-t(仅上1px)、sgds:border-r(仅右1px)、sgds:border-b(仅下1px)、sgds:border-l(仅左1px)。
指定单边宽度:sgds:border-t-2(上2px)、sgds:border-r-4(右4px)、sgds:border-b-0(移除下边框)、sgds:border-l-4(左4px)。
轴快捷类:sgds:border-x(左右各1px)、sgds:border-y(上下各1px)、sgds:border-x-2(左右各2px)、sgds:border-y-4(上下各4px)。
类参考:sgds:border 四边1px;sgds:border-{n} 四边 n 像素(n=0,2,4,8);sgds:border-{side} 某一侧1px(side为 t、r、b、l);sgds:border-{side}-{n} 某一侧 n 像素;sgds:border-x 左右各1px;sgds:border-y 上下各1px;sgds:border-x-{n} 左右各 n 像素;sgds:border-y-{n} 上下各 n 像素。
排查:边框不可见时添加颜色类,需同时具备 sgds:border 与 sgds:border-{color};默认 sgds:border 为1px,太细可用 sgds:border-2 或 sgds:border-4;若边框宽度意外改变元素尺寸,检查是否存在冲突的 box-sizing 样式。相关:utilities-border-color 提供语义化与主题感知边框色;utilities-border-radius 提供圆角工具。