css制作标签

使用HTML和CSS创建标签

HTML结构用于定义标签内容，CSS用于样式设计。以下是一个简单的标签实现方法：

<span class="tag">标签内容</span>

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

添加悬停效果

增强标签交互性，可以通过CSS添加悬停状态：

.tag:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

多色标签系统

创建不同颜色的标签类别，通过添加额外class实现：

<span class="tag primary">主要</span>
<span class="tag success">成功</span>
<span class="tag warning">警告</span>

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

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

.tag.warning {
  background-color: #ffc107;
  color: #333;
}

带关闭按钮的标签

实现可关闭的标签效果：

<span class="tag">
  可关闭标签
  <span class="close-btn">×</span>
</span>

.tag {
  position: relative;
  padding-right: 24px;
}

.close-btn {
  position: absolute;
  right: 6px;
  cursor: pointer;
}

.close-btn:hover {
  color: red;
}

圆角与阴影效果

为标签添加更丰富的视觉效果：

.tag {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  border-radius: 16px;
  padding: 4px 12px;
}

响应式标签设计

确保标签在不同设备上显示良好：

.tag {
  font-size: clamp(12px, 2vw, 14px);
  padding: clamp(4px, 1vw, 8px) clamp(8px, 2vw, 12px);
}