border: 1px solid #000 失效主因是样式被覆盖或元素无渲染空间，如 display: none、overflow: hidden 裁剪、内联元素未设 inline-block/block、空 div 高为 0 或 box-sizing 导致边框被压缩。
border: 1px solid #000 会失效的常见原因
直接写 border: 1px solid #000 却没显示边框，大概率不是语法错，而是被其他样式覆盖或元素本身不占空间。比如：display: none、visibility: hidden、父容器 overflow: hidden 裁剪了，或者该元素是内联元素（如 span）且没设 display: inline-block 或 block，导致边框无渲染区域。
检查顺序建议：
- 用浏览器开发者工具（F12）点选元素，看
Computed面板里border是否真的生效，值是否为none - 确认元素有内容、高度或设置了
min-height/height；空div默认高为 0，边框不可见 - 查是否有更高级别的 CSS 规则（比如 ID 选择器或
!important）把border覆盖成0或transparent
HTML5 中设置实线边框的可靠写法
HTML5 本身不提供新边框语法，仍用 CSS。最稳妥的是显式声明三要素：宽度、样式、颜色。别省略任一值。
推荐写法示例：
立即学习“前端免费学习笔记（深入）”；
div {
border-width: 1px;
border-style: solid;
border-color: #333;
}
或简写（更常用）：
div {
border: 1px solid #333;
}
注意：solid 是唯一表示“实线”的关键字；dashed、dotted、double 都不算实线。
如果只要某一边有边框，用方向属性更安全：
div {
border-bottom: 2px solid red;
}
inline 元素加实线边框总不显示？
span、a、strong 这类默认 display: inline 的元素，即使设了 border，也不会撑开垂直空间，上下边框可能被行高“吞掉”，看起来像没生效。
解决办法（按优先级）：
- 加
display: inline-block：保留行内流特性，同时支持宽高与边框 - 改用
display: block并配width或max-width控制宽度 - 不改 display，但强制设置
line-height和vertical-align来对齐边框位置（较麻烦，慎用）
例如：
span.highlight {
border: 1px solid #007bff;
display: inline-block;
padding: 2px 6px;
}
border 不显示还可能是 box-sizing 搞的鬼
当元素用了 box-sizing: border-box 且同时设置了 width 和 border，边框会向内压缩——这本身没错，但若原始 width 刚好卡死内容宽度，加 border 后内容可能被挤变形甚至溢出，造成“边框看不见”的错觉。
排查要点：
- 临时删掉
width或max-width，看边框是否出现 - 检查
padding是否过大，配合border-box把内容区域压到 0 - 在开发者工具中勾选 “Show layout shifts” 或手动修改
box-sizing为content-box对比效果
真实项目中，border-box 是推荐的，但得确保 width 留出足够余量容纳 border + padding。
边框看似简单，但实际卡住人的地方往往不在语法本身，而在盒模型理解、继承规则和渲染优先级。动手前先打开 F12，盯着 Computed 样式看三秒，比盲改十遍代码更有效。
