border-color: transparent 不会让边框消失，它仍占布局空间；应改用 outline 或 box-shadow 实现视觉无边框效果，避免影响盒模型。
border-color: transparent 会让边框“消失”但实际仍占空间
用 border-color: transparent 时，边框颜色不可见，但 border-width 依然生效——它会撑开元素的盒模型，影响布局、遮挡内容、干扰 hover 区域。这不是 bug，是 CSS 规范行为：透明色仍是有效颜色值，边框物理存在。
常见错误现象：
- 下拉菜单点击区域偏移，鼠标移到“视觉上无边框”的位置却触发不了
- 相邻元素间距异常，尤其在 flex 或 grid 布局中因 border 占位导致对齐错乱
- 用
border-bottom做伪下划线时，transparent+2px宽度会让文字 baseline 下沉
替代方案：用 outline 或 box-shadow 模拟“视觉无边框”效果
真正需要的是“不参与布局的边框感”。outline 和 box-shadow 不影响盒模型尺寸，更可控。
-
outline支持outline-color: transparent，且默认不占据空间；但注意它不支持圆角（outline-radius未被广泛支持） -
box-shadow可精准控制方向、模糊和偏移，例如单侧下边框：box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
—— 这比border-bottom: 1px solid transparent更干净 - 若必须用 border（比如要兼容 focus 样式），可配合
box-sizing: border-box并手动重置 padding/margin 补偿宽度
border-width 太小（如 1px）在高 DPI 屏幕上可能渲染为亚像素，加剧视觉误差
1px 边框在 Retina 或 Windows 缩放 125%/150% 下常被浏览器向下取整为 0.8px 或直接丢弃，造成“时有时无”的闪烁或错位。
立即学习“前端免费学习笔记（深入）”；
-
解决方法：用
transform: scaleY(0.5)配合transform-origin模拟 0.5px 效果（仅适用于水平/垂直边框） - 更稳妥做法：改用
box-shadow: 0 0 0 0.5px #000，CSS 中允许非整数长度，且渲染更稳定 - 检查是否启用了
image-rendering: pixelated等属性，它们可能意外影响 border 渲染精度
调试技巧：快速识别 border 是否在“偷偷占位”
别只靠肉眼判断。打开浏览器开发者工具，选中元素后：
- 看 Computed 面板里
border-top-width到border-bottom-width是否全为 0 —— 即便 color 是 transparent，width 非零就一定占空间 - 临时加
outline: 2px dashed red对比：如果 outline 和原 border 位置重叠，说明 border 确实在那里 - 在 Layout 面板勾选 “Show box model”，观察 border 区域是否挤压 content/padding
透明边框不是视觉 bug 的替罪羊，它是盒模型逻辑的诚实体现。真正要调的，从来不是颜色，而是 width 是否该存在、以及用什么方式表达“边界感”。
