最稳方案是用 margin-left: -1px 让后一个按钮轻微覆盖前一个右边界，并配合 position: relative 和 z-index 确保 hover 时只显示一条边框；避免 border:none、gap 混用、动态插入漏样式及高 DPR 下 margin 失效问题。

按钮组相邻边框变粗怎么修

直接给每个 button 写 border: 1px solid #ccc，水平排列时左右边框就会视觉叠加成 2px——这不是 bug，是浏览器按规范渲染的正常行为。关键不是“去掉一个边框”，而是让它们不同时显示。

• 最稳方案：用 margin-left: -1px 让后一个按钮轻微覆盖前一个的右边界，再配合 z-index 确保悬停时只显一条边框
• 别用 border: none 粗暴隐藏某侧边框，否则 hover 时会出现“跳变”（边框突然出现/消失）
• 如果按钮组用了 flex 布局，margin 依然生效，但要确保父容器没设 gap ——gap 和 margin 混用容易冲突

为什么 button:hover 改边框颜色还会双线

常见错因是没加 position: relative。没有定位上下文，z-index 不生效，悬停时新边框压不住邻居，结果还是两条线并排。

• 必须给所有 button 加 position: relative
• button:hover 里只改 border-color，别动 border-width 或 border-style，否则会触发重排
• 如果按钮带圆角（border-radius），重叠后圆角交界处可能有像素级错位，此时建议统一设 border-radius: 0 或全部用 overflow: hidden 裁切

嵌套按钮或动态插入时边框又重叠了

新插入的 button 元素不会自动继承已有样式逻辑，尤其在 Vue/React 的列表渲染中，容易漏掉负边距或定位声明。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 把样式写死在 class 里（如 .btn-group > button），别依赖 JS 动态加 class
• 避免用 innerHTML 插入按钮，改用 document.createElement + setAttribute，确保 DOM 节点一创建就带完整 class
• 若用 CSS-in-JS（如 styled-components），确认生成的 class 名没被压缩或作用域隔离导致样式丢失

移动端点击区域变小或错位

负外边距在高 DPR 屏幕（如 iPhone Retina）下可能被缩放放大，导致实际重叠量超出预期，点击热区偏移。

立即学习“前端免费学习笔记（深入）”；

• 用 transform: translateX(-1px) 替代 margin-left: -1px，它不受缩放影响
• 测试时打开 Chrome DevTools 的 “Toggle device toolbar”，选真实设备型号（不止模拟尺寸）
• 如果按钮文字过小（font-size: 12px），iOS Safari 可能强制放大整个按钮以满足可点击区域最小 44px 要求，间接破坏边框对齐——优先保证 min-height: 44px

边框重叠看着是视觉问题，本质是盒模型和层叠上下文没对齐；改样式前先确认定位、z-index、DPR 三者是否协同，比反复调 margin 更省时间。