子比主题美化教程：给文章标签添加多彩底色 + Hover 流光立体特效

子比（Zibll）主题默认的标签样式过于基础，今天分享一款「多彩渐变标签美化方案」—— 标签默认展示 5 种不同配色，鼠标悬浮时触发流光渐变 + 3D 上浮立体效果，视觉层次感拉满，且纯 CSS 实现，不影响网站加载速度！

效果预览

✅ 核心效果：

• 默认状态：5 种配色循环的纯色标签，带轻微 3D 阴影，简洁耐看；
• Hover 状态：标签渐变流光背景 + 向上浮动 + 阴影加深，交互感极强；
• 适配深色 / 明亮模式，无兼容性问题，手机端也能完美显示。

代码部署

1. 登录 WP 后台 → 主题设置 → 全局功能 →自定义代码 → 自定义CSS样式;
2. 复制以下完整 CSS 代码，粘贴到 CSS 编辑框中。

自定义技巧

1. 修改标签配色（替换默认 5 种颜色）

找到代码中 background-color 对应的色值，替换为你喜欢的颜色即可：

/* 示例：替换为莫兰迪色系 */
.article-tags a:nth-child(5n){background-color: #94A3B8;color: #FFF}
.article-tags a:nth-child(5n+1){background-color: #F87171;color: #FFF}
.article-tags a:nth-child(5n+2){background-color: #FBBF24;color: #FFF}
.article-tags a:nth-child(5n+3){background-color: #34D399;color: #FFF}
.article-tags a:nth-child(5n+4){background-color: #60A5FA;color: #FFF}

推荐配色参考：

• 清新风：#E0F2FE、#D1FAE5、#FEF3C7、#FEE2E2、#E0E7FF
• 深色模式专属：#1F2937、#374151、#4B5563、#6B7280、#9CA3AF

2. 调整 Hover 流光渐变

修改 hover 中的渐变色值，可更换流光效果：

/* 示例：改为青蓝渐变 */
.article-tags a:hover{
    background: linear-gradient(90deg, #00ffff, #19B5FE);
}

3. 调整标签形状（圆角 / 圆形）

修改 border-radius: 2px; 的数值：

• 圆角更圆润：改为 8px
• 圆形标签：改为 50px（胶囊形）

4. 调整 Hover 上浮距离

修改 transform: translateY(-2px); 中的数值：

• 上浮更明显：改为 -3px
• 轻微上浮：改为 -1px

5. 调整标签大小 / 间距

• padding: 4px 10px;：数值越大，标签越宽
• font-size: 12px;：修改标签文字大小
• margin: 0 5px 5px 0;：修改标签之间的间距

总结

这款标签美化方案的核心优势：

1. 视觉层次丰富：默认多彩底色 + Hover 流光立体，兼顾静态美观和动态交互；
2. 性能友好：纯 CSS 实现，无 JS 依赖，不增加服务器负担；
3. 高度自定义：配色、形状、交互效果均可按需调整，适配不同博客风格；
4. 体验优化：禁止文字选中、过渡动画丝滑，提升用户操作体验。