子比主题文章卡片顶部三色圆点美化 CSS 教程

很多 WordPress 子比主题用户会觉得默认文章列表卡片顶部单调，缺少 Mac 窗口那种精致的三色圆点装饰，下面这套 CSS 代码可以一键给文章卡片左上角添加紫、黄、青三色小圆点，还原桌面窗口质感，适配子比主题文章列表卡片posts-item.card 布局。

一、效果展示

卡片左上角生成三个横向排列的圆形色块：

• 左侧紫色圆点：#a83aec
• 中间黄色圆点：#fdbc40
• 右侧青绿色圆点：#00b8a6

圆点悬浮在卡片最上层，不会遮挡文字内容，圆角正圆、间距均匀，和你截图里的视觉效果完全一致。

三、安装使用步骤

• 登录 WordPress 后台 → 外观 → 自定义；
• 找到「额外 CSS / 自定义 CSS」选项卡；
• 将上面完整代码全部粘贴到输入框；
• 点击「保存」，刷新文章列表页面即可看到三色圆点效果。