文章卡片三个点美化+代码区块圆点美化 – 子比主题美化

文章卡片和代码区块左上角的「红黄绿三个点」，其实是一个圆点加两层 box-shadow 复制出来的，不用插三个 DOM。作者说明这套来自优知新，本站当时美化还没做完，单独显示三个点略显突兀，先做记录。

卡片上的三个点怎么生成

• .posts-item.card::before 用 content:"" 造一个 9×9 的圆形（border-radius:50%），底色 #fc625d 红。
• box-shadow:16px 0 #fdbc40, 32px 0 #35cd4b 沿水平方向复制出黄色和绿色两个等大的影子，间隔 16px，这正是三个点的来源；position:absolute;top:9px;left:15px;z-index:1000 定位置。
• .posts-item.card{padding:26px 10px 10px 10px} 把内容整体下移，给顶部圆点留出一条空带。
• 代码区块用的是同一套写法：.enlighter::before 圆点放大到 15×15，box-shadow 间隔改成 20px / 40px；.enlighter-overflow-scroll.enlighter-v-standard .enlighter 把上内边距加到 35px。

原代码里有一处需要放开

作者把 .posts-item.card 的 position:relative 注释掉了，并在旁边写明「没有定位属性需要把这个注释去掉」。没放开的话，::before 会按更外层的定位祖先摆放，三个点会跑到页面别处甚至看不见。.enlighter 那组同理，要确认代码高亮容器本身有定位属性。想改点数就增减 box-shadow 的层数并同步调间隔，颜色也直接在那里替换。

来自优知新，这种效果还是很好看的，不过可能我的站里面美化还没有做完，单独显示三个点点也有些突兀的感觉，所以先做记录，以后有需要再添加上吧~

css代码

文章卡片

代码区块