边框 (Borders)
用于控制应用程序中元素边界的实用程序
| 类 | 代表值 |
|---|---|
| border | border: thin solid rgba(var(--v-border-color), var(--v-border-opacity)); |
| border-thin | border-width: thin; |
| border-sm | border-width: 1px; |
| border-md | border-width: 2px; |
| border-lg | border-width: 4px; |
| border-xl | border-width: 8px; |
| border-0 | border-width: 0; |
| border-t | border-top-width: thin; |
| border-t-0 | border-top-width: 0; |
| border-t-thin | border-top-width: thin; |
| border-t-sm | border-top-width: 1px; |
| border-t-md | border-top-width: 2px; |
| border-t-lg | border-top-width: 4px; |
| border-t-xl | border-top-width: 8px; |
| border-e | border-inline-end-width: thin; |
| border-e-0 | border-inline-end-width: 0; |
| border-e-thin | border-inline-end-width: thin; |
| border-e-sm | border-inline-end-width: 1px; |
| border-e-md | border-inline-end-width: 2px; |
| border-e-lg | border-inline-end-width: 4px; |
| border-e-xl | border-inline-end-width: 8px; |
| border-b | border-bottom-width: thin; |
| border-b-0 | border-bottom-width: 0; |
| border-b-thin | border-bottom-width: thin; |
| border-b-sm | border-bottom-width: 1px; |
| border-b-md | border-bottom-width: 2px; |
| border-b-lg | border-bottom-width: 4px; |
| border-b-xl | border-bottom-width: 8px; |
| border-s | border-inline-start-width: thin; |
| border-s-0 | border-inline-start-width: 0; |
| border-s-thin | border-inline-start-width: thin; |
| border-s-sm | border-inline-start-width: 1px; |
| border-s-md | border-inline-start-width: 2px; |
| border-s-lg | border-inline-start-width: 4px; |
| border-s-xl | border-inline-start-width: 8px; |
| border-opacity-0 | --v-border-opacity: 0; |
| border-opacity | --v-border-opacity: .12; |
| border-opacity-25 | --v-border-opacity: .25; |
| border-opacity-50 | --v-border-opacity: .5; |
| border-opacity-75 | --v-border-opacity: .75; |
| border-opacity-100 | --v-border-opacity: 1; |
| border-dashed | border-style: dashed; |
| border-dotted | border-style: dotted; |
| border-double | border-style: double; |
| border-solid | border-style: solid; |
使用
border 边框实用程序允许您快速设置任何元素的边框样式。
All sides
使用 border, border-0, border-sm, border-md, border-lg, 和 border-xl 这些类来设置元素的边框宽度。
Individual sides
使用 border-*, border-*-0, border-*-sm, border-*-md, border-*-lg, 和 border-*-xl 这些类来设置元素在特定边的边框宽度。
Border styles
使用 border-dashed, border-dotted, border-double, 和 border-solid 这些类来设置元素的边框样式。
Theme colors
支持border属性的组件可以利用所有的 border 实用程序类。这包括由主题生成的颜色。
| Class | 代表值 |
|---|---|
| border-primary | --v-border-color: var(--v-theme-primary); |
| border-secondary | --v-border-color: var(--v-theme-secondary); |
| border-accent | --v-border-color: var(--v-theme-accent); |
| border-error | --v-border-color: var(--v-theme-error); |
| border-info | --v-border-color: var(--v-theme-info); |
| border-success | --v-border-color: var(--v-theme-success); |
| border-warning | --v-border-color: var(--v-theme-warning); |
| border-surface | --v-border-color: var(--v-theme-surface); |
| border-background | --v-border-color: var(--v-theme-background); |
| border-surface-light | --v-border-color: var(--v-theme-surface-light); |
| border-surface-variant | --v-border-color: var(--v-theme-surface-variant); |
| border-surface-bright | --v-border-color: var(--v-theme-surface-bright); |
组件
INFO
在组件上使用border属性时，请省略border-前缀。例如，使用border="sm"而不是border="border-sm"。
将border属性设置为 true 会应用一个特定于组件的边框类，比如v-card--border。这是为了确保即使禁用了实用程序类，基本的边界使用也能保持不变。
SASS 变量
你也可以使用下面的 SASS 变量来自定义边框颜色和宽度:
sass
@use 'vuetify/settings' with (
$borders: (
0: 0,
null: thin,
thin: thin,
sm: 1px,
md: 2px,
lg: 4px,
xl: 8px
)
);通过将$borders 变量设置为false来禁用生成边框类。
sass
@use 'vuetify/settings' with (
$borders: false
);