OutlineBorder 描边容器
带描边与可选裁切的包裹容器
用法
描边模式
头像类描边用 ring-offset；描边需要参与布局尺寸时用 border。
示例加载中...
遮罩裁切
圆角表达不了的形状（如六边形）用 clip-mode="mask"。
示例加载中...
最佳实践
- 圆形或圆角头像优先用
overflow，比mask开销更低、更易排查。 - 内容与描边需要视觉间隔时用
ring-offset。 - 给插槽内容设置明确宽高，让遮罩与描边的几何保持稳定。
- 只在行内上下文用
as="span"；卡片、缩略图与列表媒体保持块级包裹。
API 参考
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | string | 'div' | 根节点标签。 |
variant | 'border' | 'ring' | 'ring-offset' | 'ring-inset' | 'ring-offset' | 描边模式。 |
shape | 'circle' | 'rect' | 'squircle' | 'circle' | 形状，决定默认圆角与 clipShape="auto" 的结果。 |
borderRadius | string | number | - | 显式圆角。 |
borderWidth | string | number | '1px' | border 宽度，也是 ring 宽度的回退值。 |
borderColor | string | 'var(--tx-border-color)' | border 颜色，也是 ring 颜色的回退值。 |
borderStyle | 'solid' | 'dashed' | 'dotted' | 'solid' | variant="border" 的边框样式。 |
ringWidth | string | number | borderWidth | ring 宽度。 |
ringColor | string | borderColor | ring 颜色。 |
offset | string | number | '2px' | variant="ring-offset" 的间隔宽度。 |
offsetBg | string | 'var(--tx-bg-color)' | 间隔区域的颜色。 |
padding | string | number | 0 | 内层插槽包裹器的内边距。 |
clipMode | 'none' | 'overflow' | 'clipPath' | 'mask' | 'overflow' | 内容层的裁切策略。 |
clipShape | 'auto' | 'circle' | 'rounded' | 'squircle' | 'hexagon' | 'auto' | 裁切形状；auto 把 shape 映射为 circle、rounded 或 squircle。 |
插槽
| 插槽名 | Props | 说明 |
|---|---|---|
default | - | 被描边与裁切层包裹的内容。 |
概述
- 组件没有内置尺寸，盒子大小由插槽内容决定；尺寸类属性的数字按 px 处理。
variant="border"写入真实 CSS border；ring 系列用box-shadow，不改变布局尺寸。clipMode：overflow用border-radius裁切，clipPath写 CSSclip-path，mask写内联 SVG 遮罩（仅circle、hexagon、squircle）。clipPath下rounded与squircle都解析为inset(0 round var(--tx-outline-radius))，真正的 squircle 只在mask下呈现。- 描边只跟随
border-radius，clipShape只作用于内容层，所以描边不贴合hexagon/squircle；需要异形描边时改用异形drop-shadow滤镜。 - 只是视觉包裹器，不添加 role、标签或图片语义；alt 文本、焦点与点击目标放在插槽内容上。
技术实现
- 描边画在根节点，裁切作用于内容层
.tx-outline-border__content，两者经--tx-outline-radius共用圆角。 - 源码：
packages/tuffex/packages/components/src/outline-border/。
查看源码
packages/tuffex/packages/components/src/outline-border/index.ts