div边框不显示的主因是border-style未设置（默认为none），须同时定义宽度、样式、颜色；避免用outline替代border；优先使用十六进制色值；表格圆角需禁用border-collapse；动画边框宜用box-shadow替代。
div边框不显示？先检查 border 是否被设为 0 或 transparent
绝大多数“边框没出来”的情况，不是写法错，而是默认值或覆盖导致的。HTML 元素本身没有边框，div 的 border 默认是 medium none currentColor —— 重点在 none，也就是“无边框”。哪怕你写了 border-color: red，但没写 border-style（比如 solid），边框照样不渲染。
实操建议：
- 边框三要素必须同时存在：宽度（
border-width）、样式（border-style）、颜色（border-color）；简写用border: 1px solid #f00最稳妥 - 避免只设
border-color或只设border-width，浏览器会按规范忽略未定义的部分 - 检查是否被重置 CSS（如
* { border: 0 }）或框架全局样式覆盖，用浏览器开发者工具看 computed 样式里border-bottom-style是否为none
用 border 还是 outline？别把 outline 当边框用
outline 看起来像边框，但它不占布局空间、不能分方向设置、不支持圆角，且默认在元素焦点时才出现（比如 tab 切入）。把它当 border 用，后期改交互或适配响应式时大概率翻车。
实操建议：
- 需要撑开容器、参与盒模型计算 → 用
border - 仅用于临时高亮（如调试、键盘聚焦）→ 可用
outline，但记得加outline-offset避免遮挡内容 - 千万别写
outline: 2px solid blue来“假装”有边框，一旦父容器overflow: hidden，outline会被裁掉，而border不会
边框颜色写 red、#f00、rgb(255,0,0) 有啥区别？
视觉上没区别，但兼容性和可维护性差很多。老版本 IE 对 rgba() 支持弱，hsl() 在部分安卓 WebView 里解析异常，而命名色（如 red）只有 140 个标准名，语义模糊（darkgray 和 dimgray 差得远）。
实操建议：
- 日常开发优先用十六进制（
#ff0000或缩写#f00），兼容性好、体积小、无歧义 - 需要透明边框时，用
border-color: rgba(255, 0, 0, 0.5)，但注意：IE8 及以下不支持，如需兼容得另配filter - 避免混用写法（比如同一项目里有的地方写
tomato，有的写#ff6347），CSS 变量（--border-primary: #f00）更适合统一管理
圆角边框 + 边框塌陷？border-radius 和 border-collapse 别乱配
border-radius 对 div 有效，但对表格（table）+ border-collapse: collapse 组合基本失效——因为塌陷模式下边框被合并计算，圆角逻辑无法应用。这不是 bug，是规范行为。
实操建议：
-
div类容器设圆角，直接用border-radius: 4px即可，无需额外处理 - 真要给表格加圆角，放弃
border-collapse，改用border-spacing: 0+ 每个td/th单独设border和border-radius - 注意
border-radius值过大时（比如超过元素宽高一半），实际渲染会自动 capped，不要硬凑夸张数值
边框看着简单，但和盒模型、层叠上下文、渲染管线都咬得很紧。最容易被忽略的是：修改边框宽度会触发 layout（重排），频繁动画 border-width 在低端设备上卡顿明显——这时候该换 box-shadow 模拟边框了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
