子比主题美化 – 标签云样式美化教程

子比主题默认的标签云样式较为简洁，视觉冲击力与交互体验都有提升空间。今天给大家分享一款专为子比主题设计的彩虹标签云美化样式，采用 7 种渐变色彩循环搭配，自带精致阴影与悬停动效，让你的网站标签云瞬间活泼起来，话不多说，喜欢的站长可自行部署！

效果预览

代码部署

步骤 1：进入子比主题自定义 CSS 设置

1. 登录你的 WordPress 网站后台，点击左侧菜单栏的 子比主题设置
2. 在顶部选项卡中，找到并点击 自定义代码
3. 在页面中找到 自定义 CSS 样式 的输入框

步骤 2：添加美化 CSS 代码

将下方完整代码，全部复制粘贴到「自定义 CSS 样式」输入框中：

拉到页面底部，点击 “保存设置”，部署完成。

自定义修改指南

1. 调整标签圆角

找到 .author-tag a 中的 border-radius: 18px;，修改数值即可：

• 数值越大，标签越圆润（如 25px 为超圆润）
• 数值越小，标签越方正（如 5px 为微圆角）
• 设为 0 则为直角标签

2. 调整标签阴影

找到 .author-tag a 中的 box-shadow: 6px 4px 8px 0 rgba(151,142,136,.34);，各参数含义：

• 6px：阴影水平偏移量（正数向右，负数向左）
• 4px：阴影垂直偏移量（正数向下，负数向上）
• 8px：阴影模糊半径（数值越大阴影越柔和，设为 0 则为硬阴影）
• rgba(151,142,136,.34)：阴影颜色与透明度（.34为 34% 不透明度）

3. 调整标签间距

找到 .author-tag a 中的 margin: 0px 4px 0px 3px;，各参数含义（顺序：上、右、下、左）：

• 0px：标签上方间距
• 4px：标签右侧间距
• 0px：标签下方间距
• 3px：标签左侧间距
• 可根据页面布局自由调整数值，让标签排列更紧凑或宽松

4. 修改彩虹配色

若想替换为自己网站的主色调，只需修改对应颜色代码即可，以第 1 个标签（粉色系）为例：

• 默认背景色（半透明）：background-color:rgba(255,78,106,.15);
• 默认文字色：color:rgba(255,78,106,.8);
• 悬停背景色（实色）：background-color:rgba(255,78,106,.8);
• 将 255,78,106 替换为你想要的 RGB 颜色值，保持透明度参数（.15、.8）不变即可

结语

这款子比主题标签云美化样式，通过 7 种柔和色彩的循环搭配，配合精致的阴影与悬停动效，让原本单调的标签云瞬间成为页面的视觉亮点。无需复杂的代码修改，只需在后台粘贴 CSS 代码，就能快速上线一套活泼且精致的彩虹标签云，是子比主题站长优化页面细节、提升视觉质感的高性价比方案。