HTML5中img的border属性已废弃，必须用CSS的border属性（含宽度、样式、颜色三值）设置边框；仅设宽度或颜色无效，因默认border-style为none。
HTML5 里不能用 img 标签的 border 属性设边框——它已被废弃，写了也无效，浏览器可能忽略或行为不一致。
border: 宽度 样式 颜色 三者缺一不可
这是最常出错的地方：只写 border-width: 2px 或只写 border-color: red，边框根本不会显示。因为默认 border-style 是 none，等于没开开关。
-
border: 2px solid #333是完整写法，顺序可变（solid 2px #333也行），但三个值必须同时存在 - 样式值只能是合法关键字：
solid、dashed、dotted（注意：小尺寸下dotted常渲染为方点，不是圆点）、double（要求宽度 ≥ 3px 才能看清双线） - 颜色支持
#333、rgb(51, 51, 51)、rebeccapurple等，但不能留空
想加圆角？必须配合 border-radius，且注意 display
border-radius 只对 border 生效，单独写它没用；而且如果图片是默认的 display: inline，在旧版 Safari 中圆角可能不渲染或被裁切。
- 务必显式设置
display: block或display: inline-block -
border-radius值别超过图片自身宽高的一半，否则圆角会被object-fit: cover等裁剪逻辑吃掉 - 要单独控制某角？用
border-top-left-radius: 6px这类独立属性更稳妥
outline 不是 border，别混用
点击输入框时冒出来的蓝圈是 outline，它不占布局空间、不响应 border-radius、也不能分边设置。很多人想“去边框”却只写 border: none，结果蓝圈还在——那是 outline 没动。
- 需要视觉描边又不想挤占周围元素？用
outline: 2px dashed #007bff，再加outline-offset: 0控制距离 - 要移除焦点轮廓？
outline: none可以，但请至少补上:focus-visible替代方案，否则键盘用户会迷路 -
outline永远画在元素外层，不影响盒模型尺寸；而border默认会撑大元素，除非你加了box-sizing: border-box
响应式边框别硬写 px
固定写 border: 1px solid #ccc 在 Retina 屏或页面缩放时容易模糊或过细。相对单位才是健壮做法。
- 用
rem：比如border: 0.0625rem solid #ddd（在 16px 基准下 ≈ 1px） - 用
em：适合随父级字号变化的 UI 场景，但要注意嵌套层级影响 - 避免用
%，border 不支持百分比宽度
真正麻烦的不是怎么加边框，而是加完之后发现图片位置偏了、圆角不见了、或者高清屏上边框虚成一片——这些问题几乎都卡在 box-sizing、display、单位选择和属性组合顺序上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
