CSS border简写必须同时指定宽度、样式、颜色三者，缺一不可；border-style为none或hidden会彻底隐藏边框且使其他属性失效；元素尺寸为0或被裁剪、覆盖、透明化等也会导致边框不可见。
border 属性写全了吗？缺一不可
CSS border 是简写属性，必须同时指定宽度、样式、颜色三者，缺任意一个，边框就“消失”——不是渲染失败，而是被浏览器当作无效值忽略。border: 1px solid; 或 border: #333 dashed; 都不会生效，因为样式或宽度缺失。
-
border-width：可以是thin/medium/thick，或具体长度（如1px） -
border-style：必须是有效值，如solid、dashed、dotted；none和hidden会彻底隐藏边框 -
border-color：可省略，此时取color的计算值；但若父元素color为transparent或未设置，边框可能“看不见”
border-style 为 none 或 hidden 导致边框不可见
这是最隐蔽的坑：border-style: none; 不仅不显示，还会让 border-width 和 border-color 失效；hidden 在表格边框折叠模型中优先级更高，也会压制边框显示。
- 检查是否误用了
none替代solid（比如复制代码时删多了） - 在表格中调试时，加
border-collapse: separate;可绕过hidden干扰 - 用浏览器开发者工具的“Computed”面板，直接看
border-bottom-style等展开属性是否真的为solid
父容器或自身尺寸为 0，边框没地方画
如果元素没有内容、内边距、最小宽高，且 display 为 inline，它的实际高度可能为 0 —— 此时即使 border 值完全合法，也看不到任何边框。
- 给元素加
min-width: 1px;或height: 1em;快速验证是否是尺寸问题 -
display: inline元素的垂直方向边框（border-top/border-bottom）常被行高“吞掉”，改用inline-block或block更可控 - Flex/Grid 容器中子项若未设
flex-basis或grid-template-columns，也可能坍缩为零尺寸
其他常见干扰因素
边框“消失”未必是 border 写错了，可能是被覆盖、裁剪或透明化。
立即学习“前端免费学习笔记（深入）”；
- 父元素设置了
overflow: hidden;，而边框刚好在裁剪区域外（尤其配合transform或负margin时） - 元素有
opacity: 0;或visibility: hidden;，整个元素（含边框）不可见 - 使用了
border-image但源图加载失败或切片参数错误，会回退到默认none - 在暗色背景上用了浅色边框，或反之，肉眼误判为“没显示”——用开发者工具的“Toggle element outline”功能可强制高亮轮廓
div {
border: 2px solid #007bff; /* ✅ 正确：三要素齐全 */
min-height: 20px; /* ✅ 防止坍缩 */
box-sizing: border-box; /* ✅ 确保 border 计入尺寸 */
}真正卡住的时候，别只盯着 border 值本身——先看 computed 样式里那三个子属性有没有被覆盖、有没有变成 none、元素有没有实际渲染空间。这些比反复改 border 值更省时间。
