最常见的边框不显示原因是漏写border-width或border-style；border-style为none时边框不可见；box-sizing默认content-box导致border额外增加尺寸；border-radius过小与粗border交界处易出现渲染断层；border-color: transparent仍占布局空间。
border属性写法不对，边框就是不显示
最常见的原因是漏写了border-width或border-style。CSS里border是简写属性，但border-style为none时，无论宽高颜色设成啥，边框都不可见——这是默认值，不是bug。
-
border: 1px solid #000✅ 宽度、样式、颜色全有 -
border: #000❌ 缺少宽度和样式，等价于border: medium none #000→ 不显示 -
border: 1px #000❌ 缺少样式，等价于border: 1px none #000→ 还是不显示
别依赖浏览器“猜”，显式写出border-style最稳妥，尤其在重置样式后。
border影响元素尺寸，盒模型没算准就错位
默认box-sizing是content-box，这时候border会额外加在width和height之外。比如设了width: 200px + border: 5px solid red，实际占宽是210px（左右各+5px）。
- 布局错位、卡片溢出、Grid/ Flex 项换行异常，常源于此
- 全局修复建议：在根选择器加
*, *::before, *::after { box-sizing: border-box; } - 单个元素临时修正：直接给
box-sizing: border-box，此时border计入设定的width
注意：border-box对padding也生效，不是只管border。
立即学习“前端免费学习笔记（深入）”；
border-radius和border交界处出现像素级断层
当border较粗（比如≥3px）且border-radius值不够大时，圆角边缘可能露出底色、锯齿明显，甚至在某些Chrome版本里出现1px白边。
- 根本原因：浏览器对圆角+实线边框的抗锯齿渲染策略不一致
- 简单解法：把
border-radius设为至少等于border-width的一半（如border: 4px solid #000→border-radius: 2px起） - 更稳方案：用
outline替代部分场景的border（但outline不占布局空间、不支持圆角） - 极端情况可加
transform: translateZ(0)触发硬件加速，缓解渲染瑕疵
这不是代码写错，是渲染层面的妥协，调参比改逻辑更常用。
border-color透明但边框还在占位
border-color: transparent不会让边框“消失”，它只是把颜色设为透明，border-width和border-style依然生效，仍参与盒模型计算、仍响应点击区域。
- 想彻底移除视觉和布局影响：用
border: none或border-width: 0 -
transparent适合做下拉箭头、三角形等纯CSS图形，靠边框拼合，此时需要保留宽度和样式 - 和
opacity: 0区别很大：opacity作用于整个元素，会影响子内容；transparent只改颜色
边框是否参与布局，只看border-width是否为0，跟颜色无关。
