css制作标签

使用HTML和CSS创建标签

HTML结构中使用<span>或<div>作为标签容器：

<span class="tag">CSS标签</span>

基础CSS样式：

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

添加交互效果

悬停状态增强视觉反馈：

.tag:hover {
  background-color: #d0d0d0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

多种颜色变体

通过不同类名实现多色标签：

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

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

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

带关闭按钮的标签

HTML结构：

<span class="tag">
  可关闭标签
  <button class="tag-close">&times;</button>
</span>

关闭按钮样式：

.tag-close {
  margin-left: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

圆角与直角风格

修改border-radius属性实现不同风格：

/* 胶囊形标签 */
.tag-pill {
  border-radius: 50px;
}

/* 直角标签 */
.tag-square {
  border-radius: 0;
}

响应式标签设计

根据屏幕尺寸调整标签大小：

@media (max-width: 768px) {
  .tag {
    padding: 2px 6px;
    font-size: 11px;
  }
}