当前位置：首页 > CSS

css 制作小标签

2026-04-02 13:16:39CSS

CSS 制作小标签的方法

使用内联元素和基础样式 通过 <span> 或 <div> 结合基础 CSS 创建小标签。设置 display: inline-block 或 display: inline 控制布局，添加 padding、border-radius 和背景色增强视觉效果。

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

添加边框和阴影 通过 border 属性增加边框，box-shadow 添加微妙的阴影效果，提升层次感。

.tag-bordered {
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

使用伪元素装饰 通过 ::before 或 ::after 添加图标或装饰性内容，增强标签的辨识度。

css 制作小标签

.tag-icon::before {
  content: "🔹";
  margin-right: 4px;
}

响应式标签 结合媒体查询调整标签大小或布局，确保在不同设备上显示一致。

@media (max-width: 600px) {
  .tag {
    font-size: 10px;
    padding: 1px 6px;
  }
}

动画效果 通过 transition 或 transform 添加悬停动画，增加交互性。

css 制作小标签

.tag-hover {
  transition: all 0.3s ease;
}
.tag-hover:hover {
  transform: translateY(-2px);
  background-color: #e0e0e0;
}

颜色变体 利用 CSS 变量或预处理器（如 Sass）定义多组颜色方案，方便复用。

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

示例代码

整合上述特性的完整示例：

<style>
  .tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 6px;
  }
  .tag-primary {
    background-color: #007bff;
    color: white;
  }
  .tag-hover {
    transition: all 0.3s ease;
  }
  .tag-hover:hover {
    transform: scale(1.05);
  }
</style>

<span class="tag tag-primary tag-hover">New</span>
<span class="tag" style="background: #f0f0f0;">Tag</span>