边框不显示主因是border-style缺失或颜色与背景同色；浏览器要求border必须同时含宽度、样式、颜色三要素，缺一则不渲染。
边框设了却看不见，八成是 border-style 没写，或者颜色和背景撞色了。
为什么写了 border 却没显示？
浏览器要求 border 必须同时包含宽度、样式、颜色三要素，缺一不可。只写 border: 1px; 或 border: solid;，等于什么都没设——因为 border-style 默认是 none，压根不渲染。
-
border: 1px solid #000;✅ 有效（三值齐全） -
border-color: #000; border-width: 1px;❌ 无效（漏了border-style） -
border: 1px solid;⚠️ 可能生效，但颜色取currentColor，容易和文字/背景同色而“隐形” - 检查是否被父容器的
overflow: hidden裁掉，或元素是display: inline导致高度塌陷
怎么只加某一边边框？
别用 border 简写再覆盖其他三边，直接用方向性属性更干净、不易出错。
- 上边：
border-top: 2px dashed #6c757d; - 右边：
border-right: 1px solid #007bff; - 清除右边：
border-right: none;（别用border-right-width: 0，样式和颜色还在，可能干扰继承） - 如果需要四边不同，用多值语法：
border-color: #f00 #00f #0f0 #000;（上右下左顺时针）
表格边框为什么总出双线？
<table border="1"> 是过时写法，现代 CSS 下它和 <code>border-collapse 冲突，导致每个单元格自带边框，叠加出“双线”。
- 统一用 CSS 控制：
table { border-collapse: collapse; }+td, th { border: 1px solid #ccc; } - 如果必须兼容旧代码，先重置：
table[border] { border: none; }，再重新定义 - 注意层级：给
table设了border，会盖过td的边框（除非td选择器优先级更高）
圆角边框看起来生硬怎么办？
border-radius 和 border-width 不匹配时，小尺寸元素的圆角会显得“被削平”，这不是 bug，是绘制基准在边框外缘。
- 建议
border-radius≥border-width的 1.5 倍，例如border: 2px solid #000;配border-radius: 4px; - 避免用
outline模拟边框来绕开这个问题——outline不支持圆角，也不参与布局计算 - 若背景色在圆角处溢出，加
background-clip: padding-box;
最常被忽略的是：边框不是“画上去就完事”，它参与盒模型计算，会影响元素实际尺寸；而 border-style: none 下，哪怕 border-width 和 border-color 都设了，也完全不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
