border必须写全宽度、样式、颜色三要素，漏掉solid等样式则边框不显示；html5已废弃img的border属性，须用css设置，且默认盒模型下border会增加元素尺寸。
直接用 border 加彩色边框最可靠，但必须写全宽度、样式、颜色三要素；漏掉 solid（或 dashed 等）就等于没边框。
为什么 border="2" 不起作用？
HTML5 已废弃 img 的 border 属性，浏览器不再解析它。旧写法如 <img src="a.jpg" border="2"> 在现代浏览器中基本无效，或行为不一致——别再试了。
必须走 CSS 路线：style="border: 2px solid #e74c3c;" 或外链样式表。
-
border-style默认是none，所以只写border-width或border-color都不会显示边框 - 颜色支持命名色（
red）、十六进制（#ff6b6b）、RGB（rgb(231, 76, 60)），但不能留空或写transparent代替颜色值（那会变无色，不是“隐藏”） -
border的三个值顺序能换，但solid（或dashed/dotted等）不能省——它是开关
加了边框后图片错位/撑大了怎么办？
默认盒模型下，border 会额外增加元素总尺寸。如果图片设了固定宽高（比如 width: 200px; height: 150px;），加上 3px 边框后，实际占位变成 206×156px，容易破坏网格或溢出容器。
- 解法一（推荐）：
box-sizing: border-box，让边框包含在设定的宽高中：style="width: 200px; height: 150px; border: 3px solid #2ecc71; box-sizing: border-box;" - 解法二：
outline（不占布局空间），但注意它不支持圆角、不能分边、且可能和聚焦样式冲突：outline: 2px solid #e67e22; outline-offset: 0; - 别手动减宽高：比如把
200px改成194px来抵消边框——响应式场景下极易崩，且维护成本高
只想加某一边的彩色边框？
用单边属性更安全，不会意外覆盖其他边，也避免误删已有样式。
- 只加下边：
border-bottom: 2px solid #3498db; - 只加左右：
border-left: 1px solid #95a5a6; border-right: 1px solid #95a5a6; - 清除某边：
border-top: none;（别用0，语义不清，旧浏览器可能不认）
单边写法不会自动重置其余三边，适合叠加控制，但要注意 CSS 层叠顺序。
真正容易被忽略的是：只要用了 border，又没设 box-sizing: border-box，就一定会改变元素的实际尺寸——这不是 bug，是盒模型的默认行为，但多数人第一次踩坑时都以为是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
