用css border属性可一行代码实现图片蓝边，如style="border: 2px solid #007bff;"；支持单边设置、不同样式颜色及border-radius圆角，禁用废弃html border属性和无样式的border声明。
直接用 CSS 的 border 属性就能实现，一行代码搞定：
最简写法（推荐）
在 <img> 标签里加内联样式：
-
2px是边框粗细，可调为1px、3px等 -
solid表示实线（不能省略，否则边框不显示） -
#007bff是标准蓝色，也支持blue、rgb(0,123,255)等写法
只给某一边加蓝边（按需选）
比如只加底部蓝线，突出图片下沿：
- 可用
border-top、border-left、border-right单独控制 - 各边可设不同宽度、样式或颜色，互不影响
避免常见错误
这些写法无效或不推荐：
- ❌
<img border="2">—— HTML5 已废弃，不生效且验证失败 - ❌
border: 2px #007bff;—— 缺少solid（或其他样式），边框不会出现 - ❌ 仅用
outline模拟边框 —— 它不占布局空间，位置偏移难控，也不支持圆角
想加圆角蓝边？顺手加上
搭配 border-radius 就是卡片风：
-
border-radius: 4px是轻微圆角，12px更柔和，50%变成圆形（需宽高相等） - 注意：圆角必须和
border同时存在才生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
