标签制作css

标签制作 CSS

要制作标签的 CSS 样式，可以通过以下方法实现：

基础标签样式 使用 display: inline-block 或 inline 让标签呈现行内元素的特性，同时设置背景色、边框、圆角等基础属性。

.tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e0e0e0;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  margin-right: 4px;
}

不同颜色的标签 通过添加不同的类名或使用 CSS 变量实现多色标签。

.tag-primary {
  background-color: #007bff;
  color: white;
}

.tag-success {
  background-color: #28a745;
  color: white;
}

可关闭标签 添加关闭按钮并设置交互效果。

.tag-close {
  margin-left: 4px;
  cursor: pointer;
  color: #999;
}

.tag-close:hover {
  color: #333;
}

悬浮效果 增强标签的交互体验。

.tag:hover {
  opacity: 0.9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

HTML 结构示例

<span class="tag">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success <span class="tag-close">×</span></span>

通过调整上述 CSS 属性，可以灵活控制标签的大小、颜色、间距等外观特性，满足不同场景的设计需求。