Spectre标签圆形标签

简介

Spectre是一个适用于现代 Web 开发的轻量级CSS框架，其中包含了许多有用的功能，包括基于标签的 UI 系统。其中，Spectre标签圆形标签就是其中之一。

用法

要使用 Spectre 标签圆形标签，您只需要将其包含在一个<span>标签内，并使用以下CSS类之一：

• tag tag-rounded
• tag tag-rounded tag-primary
• tag tag-rounded tag-secondary
• tag tag-rounded tag-success
• tag tag-rounded tag-warning
• tag tag-rounded tag-error
• tag tag-rounded tag-link

以下是一个例子：

<span class="tag tag-rounded tag-primary">标签</span>

这将创建一个蓝色的圆形标签，带有圆角，上面写着“标签”。

自定义

如果您想要自定义 Spectre 标签圆形标签的样式，您可以使用以下 CSS 变量：

• --tag-radius - 圆角半径
• --tag-font-size - 字号大小
• --tag-padding - 内边距
• --tag-border-width - 边框宽度
• --tag-border-radius - 边框圆角半径

以下是一个例子：

.tag.tag-rounded {
  --tag-radius: 10px;
  --tag-font-size: 16px;
  --tag-padding: 5px 10px;
  --tag-border-width: 2px;
  --tag-border-radius: 20px;
}

结论

Spectre 标签圆形标签是一个易于使用和自定义的功能，可以帮助您创建清晰，易于阅读的界面。 它是 Spectre 框架的一部分，因此可以与其他 Spectre 组件一起使用。