标签制作css

基础标签样式设计

使用CSS创建标签需定义边框、背景色、圆角等基础属性。示例代码：

.tag {
  display: inline-block;
  padding: 4px 8px;
  background-color: #e0f7fa;
  border: 1px solid #b2ebf2;
  border-radius: 12px;
  font-size: 12px;
  color: #00838f;
}

动态颜色标签

通过CSS变量或预定义类实现多色标签方案：

.tag-primary {
  background-color: #e3f2fd;
  color: #1565c0;
}
.tag-success {
  background-color: #e8f5e9;
  color: #2e7d32;
}

标签交互效果

添加悬停和点击反馈增强用户体验：

.tag-interactive {
  transition: all 0.3s ease;
  cursor: pointer;
}
.tag-interactive:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

带图标标签

结合伪元素或内联SVG实现图标标签：

.tag-icon::before {
  content: "★";
  margin-right: 4px;
  vertical-align: middle;
}

响应式标签组

使用Flexbox或Grid布局管理标签容器：

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

特殊形状标签

创建气泡或标记形标签：

.tag-bubble {
  position: relative;
  padding-right: 15px;
}
.tag-bubble::after {
  content: "";
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}