最常见原因是未指定border-style（默认为none），导致边框不可见；必须同时写清宽度、样式、颜色三要素，如border: 1px solid #ccc，且推荐配合box-sizing: border-box避免尺寸溢出。
直接用 border 就能加简单外框，但必须同时写清宽度、样式、颜色三要素，缺一个都看不见。
为什么写了 border 却没显示？
最常见原因是只写了其中一两个值，比如 border-width: 1px 或 border-color: #ccc，但漏了 border-style。CSS 默认是 border-style: none，等于开关关着，再宽再灰也没用。
-
border: 1px solid #ccc是完整写法；solid 1px #ccc也合法，顺序可换，但三个值不能少 - 样式只能用关键字：
solid（实线）、dashed（虚线）、dotted（小图上常渲染成方点）、double（宽度 ≥ 3px 才看得清） - 颜色不能留空：
border: 1px solid是无效声明
怎么避免图片加框后位置偏、高度变？
默认盒模型是 content-box：边框会额外增加元素总尺寸。一张设了 width: 200px; height: 150px; 的图，加上 border: 2px solid 后，实际占用变成 204×154 像素，容易撑破容器或错位。
- 推荐加
box-sizing: border-box，让边框向内缩，宽高保持不变 - 写法示例：
style="width: 200px; height: 150px; border: 2px solid #ccc; box-sizing: border-box;" - 如果用 CSS 类统一管理，记得在类里也带上
box-sizing: border-box
要不要用 outline 替代 border？
不推荐——除非你明确需要「不占布局空间」的视觉描边。因为 outline 不支持圆角、不能分边、还可能干扰键盘焦点提示（比如点击后冒出来的蓝圈）。
-
outline永远画在元素外层，不影响周围排版，但border-radius对它完全无效 - 若真要用，务必加
outline-offset: 0控制偏移，否则不同浏览器位置可能飘忽 - 移除焦点轮廓不能只靠
outline: none，否则键盘用户会失去焦点，得补上:focus-visible替代方案
真正容易被忽略的是组合行为：比如加了 border-radius 又用了 object-fit: cover，圆角可能被裁掉；或者在 Retina 屏上写 1px 边框，实际渲染发虚。这些都不是 bug，而是属性之间天然的协作逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
