使用border-radius和background可创建圆角、胶囊形及渐变标签，结合hover交互提升视觉效果。
想要用CSS制作简洁美观的标签样式，border-radius 和 background 是两个非常实用的属性。通过它们的结合，可以快速实现圆角标签、彩色背景标签甚至渐变风格标签，适用于按钮、分类标记、状态提示等场景。
基础圆角标签
使用 border-radius 可以将矩形元素的边角变圆，常用于创建柔和的视觉效果。配合 background-color 设置背景色，就能做出基本的标签样式。
示例代码：
.tag {
display: inline-block;
padding: 6px 12px;
background-color: #007bff;
color: white;
border-radius: 4px;
font-size: 14px;
}
这里设置了一个蓝色背景的标签，文字白色便于阅读，border-radius: 4px 让四个角轻微圆润，看起来更友好。
胶囊形标签（全圆角）
如果想让标签看起来像胶囊或水滴状，可以把 border-radius 的值设得大一些，通常等于标签高度的一半。
立即学习“前端免费学习笔记（深入）”；
示例代码：
.capsule-tag {
display: inline-block;
padding: 6px 16px;
background-color: #28a745;
color: #fff;
border-radius: 20px; /* 高度约12+6*2=24px，半径取20px接近半圆 */
font-size: 14px;
text-align: center;
}
这种样式常见于“已启用”、“成功”类状态标签，视觉上更现代、轻盈。
渐变背景标签
CSS 的 background 支持线性渐变（linear-gradient），能为标签增添层次感。
示例代码：
.gradient-tag {
display: inline-block;
padding: 8px 14px;
color: white;
background: linear-gradient(90deg, #ff6b6b, #ee5a24);
border-radius: 16px;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
这个标签从左到右呈现红橙渐变，加上小阴影文字提升可读性，适合突出重要信息。
悬停效果增强交互
给标签添加鼠标悬停（hover）状态，可以让用户感知其可点击或可交互。
示例代码：
.interactive-tag {
display: inline-block;
padding: 6px 12px;
background-color: #6f42c1;
color: white;
border-radius: 12px;
transition: all 0.3s ease;
}
.interactive-tag:hover {
background-color: #5a32a3;
transform: scale(1.05);
}
通过 transition 实现平滑过渡，悬停时颜色变深并轻微放大，提升用户体验。
基本上就这些。只要掌握 border-radius 控制形状，background 定义色彩或渐变，再搭配合适的内边距和文字样式，就能快速构建出实用又好看的标签。不复杂但容易忽略细节，比如颜色对比度和圆角比例协调。
