border-style: solid 为什么 没生效？
最常见原因是 border-width 为 0 或未设置。HTML5 中边框默认宽度是 0，哪怕写了 border-style: solid，只要没配 border-width（或简写 border），视觉上就是“没边框”。
- 必须显式设置宽度，例如：
border: 1px solid #000或分开写border-width: 1px; border-style: solid; - 注意缩写顺序：
border:，漏掉任意一项都可能失效 - 如果用了
border: none或border: 0在父级或重置样式中，会覆盖后续的solid声明
元素没有边框是因为 display 或 box-sizing 问题
某些元素（如 、）在 浏览器 默认样式里自带 border，但一旦设了 display: inline 或 display: flex，又没重置 border，容易误判为“失效”；更隐蔽的是 box-sizing: border-box 下，若 width 和 padding 已占满容器，加边框会导致溢出或被裁剪，看起来像没画出来。
- 检查 computed styles，确认
border-top-width等是否真为 0px - 对内联元素（如
）设边框时，需同时设display: inline-block或block，否则边框不渲染 - 用
outline临时调试：它不占布局空间，能快速验证是否真没画线
伪元素 ::before / ::after 的边框不显示
伪元素默认是 display: inline，且无内容（content: "" 必须存在）时，即使设了 border 也不会渲染——因为没有尺寸，边框无处可画。
- 必须写
content: ""（空字符串也不可省略） - 至少设置一个尺寸相关属性：
width、height、padding或position: absolute+ 坐标 - 若用了
position: absolute，记得父容器加position: relative，否则可能跑出视口
移动端 Safari 或旧版 Chrome 边框模糊 / 虚化
这不是“失效”，而是设备像素比（dpr）导致 1px 物理边框被渲染成 0.5px，浏览器自动做了抗锯齿，看起来像虚线或透明。尤其在 Retina 屏上高频出现。
立即学习 “ 前端免费学习笔记（深入）”；
- 用媒体查询检测 dpr：
@media (-webkit-min-device-pixel-ratio: 2)，然后设border-width: 0.5px - 更稳妥方案：用
transform: scaleY(0.5)配合transform-origin: top模拟 1px - 避免直接写
border: 1px solid在全局重置里，它在高 DPR 下天然不可靠
实线边框看似简单，真正卡住人的往往是「以为设了，其实没生效」，或是「生效了但被其他规则吞掉」「在特定设备上根本画不出来」——盯紧 border-width、content、display 和设备像素比这四个点，基本能覆盖 90% 的“失效”场景。
