# 边框半径
使用边框半径辅助样式对元素快速应用border-radius样式
# 使用
# 注意事项
The infixes sm, lg, xl, and xxl correlate to the border radius size and are not affected by breakpoints.
# SASS 变量
配置或禁用边框半径辅助类。 需要使用 vue-cli-plugin-vuetify 库和一个已配置的 variables.s(c|)ss 文件。 有关如何配置变量的其他信息位于<a href=“/features/sass variables”>sass 变量文档页。
基于$border-radius-root变量的四舍五入尺寸，该变量的默认值为0.25rem。
$rounded: (
0: 0,
'sm': $border-radius-root / 2,
null: $border-radius-root,
'lg': $border-radius-root * 2,
'xl': $border-radius-root * 4,
'xxl': $border-radius-root * 6,
'pill': 9999px,
'circle': 50%
);
# 覆盖半径
您可以通过在项目的variables文件中添加名为$rounded的列表来更改或添加border-radius大小。
$rounded: (
'sm': $border-radius-root / 3,
'lg': $border-radius-root * 2
);
# 示例
# 其他
# 药丸和圆形
您可以使用 .rounded-pill 类创建药丸，并使用 .rounded-circle 类来创建圆形。
# 移除边框半径
使用 .rounded-0 辅助类来 移除 元素所有的半径或按边角选择的半径; 例如. .rounded-l-0 和 .rounded-tr-0.
# 设置所有角的半径
通过 rounded 辅助类允许您修改元素的 边框半径. Use the .rounded-sm, .rounded, .rounded-lg, .rounded-xl and .rounded-xxl to add a border radius of varying size.
# 通过边设置半径
边框半径可以通过使用 t, r, b, l 内置类在每条边上配置; 例如. .rounded-b-xl 和 .rounded-t.
# 通过角设置半径
边框半径可以通过使用 tl, tr, br, bl 内置类在每个角上配置; 例如. .rounded-br-xl 和 .rounded-tr.