Border
边框属性用于控制组件的边框样式和宽度。请查看 可用边框样式。
示例
.element {
border: var(--dwc-border-width) var(--dwc-border-style) red;
}
变量
| 变量 | 默认值 |
|---|---|
--dwc-border-width | 1px |
--dwc-border-style | solid |
边框半径
边框半径变量定义了组件角落的圆润程度。所有值均以 em 为单位定义，因此它们会随着字体大小而缩放。
EM 单位
em 是一个相对单位，会随着父元素的 字体大小 而缩放。
示例
.element {
border-radius: var(--dwc-border-radius-m);
}
变量
| 变量 | 默认值 | 示例 |
|---|---|---|
--dwc-border-radius-2xs | 0.071em | |
--dwc-border-radius-xs | 0.125em | |
--dwc-border-radius-s | 0.25em | |
--dwc-border-radius-m | 0.375em | |
--dwc-border-radius-l | 0.5em | |
--dwc-border-radius-xl | 0.75em | |
--dwc-border-radius-2xl | 1em | |
--dwc-border-radius-round | 50% | |
--dwc-border-radius-pill | 9999px | |
--dwc-border-radius | var(--dwc-border-radius-s) |