border: 2px solid #333 不显示的最常见原因是缺 border-style，因默认值为 none；必须同时指定宽度、样式、颜色三要素，顺序固定且缺一不可。
img 标签的 border 属性在 HTML5 中已彻底废弃，写了也无效。必须用 CSS 的 border 属性，且三要素——宽度、样式、颜色——缺一不可。
border: 2px solid #333 为什么有时不显示？
最常见原因是只写了其中一两个值，比如 border-width: 2px 或 border-color: red，但没写 border-style。CSS 默认是 border-style: none，等于开关关着，再宽再红也没用。
-
border: 2px solid #333是完整写法；solid 2px #333也合法，顺序可变，但三个值必须同时存在 - 样式只能用关键字：
solid、dashed、dotted（小图上常渲染成方点）、double（宽度 ≥ 3px 才看得清） - 颜色不能留空，
border: 2px solid是无效声明 - 若图片是响应式缩放的，固定
px值在 Retina 屏上可能发虚，建议改用0.0625rem（≈1px @16px 基准）
加了 border-radius 却没圆角？
根本问题不在 border-radius 本身，而在 img 的默认 display: inline 行为。旧版 Safari 和某些行内流场景下，圆角会被裁切或压根不生效。
- 必须显式设置
display: block或display: inline-block - 如果图片用了
object-fit: cover，border-radius值超过图片宽高一半时，圆角会被裁剪——这不是 bug，是渲染逻辑使然 - 想单独控制某角？用
border-top-left-radius: 6px这类独立属性，比写border-radius: 6px 0 0 6px更清晰稳妥
box-shadow 能代替 border 吗？
可以，但目的不同：box-shadow 不占布局空间、不响应 border-radius（它自己会跟随），适合做“视觉描边”而非结构边框。
- 外描边：
box-shadow: 0 0 0 2px #e2e8f0（无模糊、无偏移，紧贴边框） - 内边框：加
inset关键字，如box-shadow: inset 0 0 0 2px #a0aec0，永远在 border 内侧 - 注意：Retina 屏上
box-shadow容易发虚，优先用整数像素值；blur-radius过大会让阴影脱离图片轮廓 - 别用
outline模拟边框——它不支持圆角，也不分边，还可能覆盖掉键盘用户的焦点提示
为什么图片加了边框后位置偏了、高度变了？
因为默认盒模型是 content-box：border 会额外增加元素总尺寸。一张设了 width: 200px; height: 150px; 的图，加上 border: 4px solid 后，实际占用就是 208×158 像素。
- 加
box-sizing: border-box让边框向内缩，保持宽高不变 - 如果父容器有
line-height，而图片仍是inline，上下边框会被遮挡——这也是为什么display: block或inline-block是刚需 - 真正容易被忽略的是组合效果：比如
border-radius + object-fit: cover + overflow: hidden套在一起时，圆角是否可见，取决于哪一层先裁剪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
