仿Mac三点设计如何移植到其他主题？

仿Mac三点设计真的太有辨识度了！每次看到文章卡片右上角那三个彩色圆点，脑子就会自动联想到Mac窗口的关闭、最小化、全屏按钮，说实话，这种小细节加到博客主题里，感觉“高级感”瞬间拉满。我自己折腾主题的时候也遇到过类似需求：想要把这套三点样式移植到别的主题里，不仅仅是子比，别的WordPress主题也能玩。

其实核心原理很简单，就是用 CSS + HTML 画三个圆圈，然后配上合适的颜色。就像 source_content 里那段 .circle 和 .zbbox 的代码，直接复制粘贴到你的主题自定义样式里就行。比如：

• .circle 用 padding 和 display: flex 调整位置
• .zbbox 设置圆形、尺寸、内边距、border-radius
• 然后 .red、.yellow、.green 分别给三点赋色，原本用的是 #2997f7、#ff5144、#bfc930，其实换成你喜欢的色号也没问题

你要移植到其他主题，最方便的方式就是：

1. 找到你想加三点的地方（比如文章卡片、列表头部、侧栏模块），插入类似

   <div class="tools">
     <div class="circle"><span class="red zbbox"></span></div>
     <div class="circle"><span class="yellow zbbox"></span></div>
     <div class="circle"><span class="green zbbox"></span></div>
   </div>

1. 把上面提到的CSS加到主题自定义CSS里，后台自定义样式那一栏直接贴过去就能生效
2. 如果你主题的HTML结构跟子比不一样，稍微调整一下容器和类名就OK。其实我试过几次，哪怕是老牌的博客主题，只要能加自定义HTML和CSS，都能复刻这个效果

有些主题可能自带自定义区块或者小工具，直接插入HTML代码就行，不用改核心文件。只要你的主题支持外观–小工具–自定义HTML，那就更方便了，随心所欲放到任何位置。颜色、大小、间距都能随便改，完全不受限。

说实话，移植过程中唯一让我“抓狂”的点就是不同主题的卡片结构不一样，有的容器太窄，三点看起来会挤在一起。这个时候就得用 media query 适配一下小屏幕，像 source_content 里那样，控制每个点的位置和大小。别忘了，Mac三点本身就是一种视觉点缀，别太追求像素级还原，适当融入你主题的风格，效果反倒更好。

最后，如果你也喜欢蓝色背景什么的，background那段CSS搬过去就行了。三点设计配上渐变或者图片背景，真的绝了！反正我的建议就是：大胆移植，随便玩，遇到问题就多调CSS。整个过程非常解压，搞完之后你的博客会有一种“莫名的高级感”，相信我，朋友们看到一定会夸你审美在线。