border-left没生效主要因三点：未设border-style、父容器overflow:hidden裁剪或元素为inline需改display；retina屏模糊需用0.5px或transform缩放；flex中推荐gap+border-right替代以避免宽度计算错误。
border-left 为什么没生效？检查这三点
单侧边框不显示，大概率不是写法错，而是被其他样式覆盖或盒模型干扰。border-left 需要元素有明确的 border-style（不能只设 border-width 或 border-color），否则浏览器会当它不存在。
-
border-left必须搭配border-left-style（如solid、dashed），只写border-left-width: 2px不会出线 - 父容器设置了
overflow: hidden，而子元素边框刚好在裁剪边界外，看起来像“消失” - 元素是
display: inline（比如span），默认不响应border的垂直方向渲染——得加display: inline-block或改用块级元素
想只留左边框，但右边距不对齐？用 outline + offset 更稳
纯靠 border-left 拉边框，常导致整体宽度变大（尤其在 flex 或 grid 布局里），破坏对齐。这时候不如用 outline 模拟：它不占布局空间，且支持单侧偏移。
-
outline: 2px solid #333本身是全向的，但配合outline-offset: -2px可让它“缩进”，再结合clip-path或伪元素遮盖三侧，视觉上只剩左边 - 更直接的做法：用
::before伪元素绝对定位，宽高设为100%，left: 0，top: 0，只设border-left，再z-index: -1 - 注意：
outline不支持圆角，border-radius对它无效；伪元素方案兼容性更好（IE11+）
border-left 在 Retina 屏模糊？和像素对齐有关
1px 边框在高清屏上发虚，本质是 css 像素和设备物理像素没对齐。这不是 border-left 独有问题，但单侧时更容易被注意到。
- 别用
border-left: 1px solid #000，改用border-left: 0.5px solid #000（现代浏览器支持） - 或启用
transform: scaleY(0.5)+transform-origin: top把一条 2px 边框压成 1px 物理像素 - 如果项目要兼容老版本 safari，用媒体查询检测
device-pixel-ratio，对 2x 屏单独设border-left: 0.5px
用 border-left 做分割线时，flex item 宽度算不准
在 display: flex 容器里给子项加 border-left，第一项通常不该有，但手动加 :not(:first-child) 还是可能错位——因为边框参与盒模型计算，影响 flex-basis 和剩余空间分配。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一给所有子项设
border-left，再用margin-left: -1px抵消第一个的左侧边框（需父容器overflow: hidden防溢出） - 更干净的解法：用
gap配合border-right，即每个 item 只画右框，最后一个隐藏——这样边框始终在间隙右侧，不扰动 flex 计算 - 注意：
gap在 firefox 旧版本支持弱，若需兼容，退回到伪元素方案更可靠
事情说清了就结束。真正难的不是怎么写 border-left，而是它什么时候该出现、什么时候该让位给 outline 或伪元素——边界感比语法重要。