直接用CSS的border属性实现图片蓝边，HTML5已废弃img的border属性；border: 2px solid blue无效常见原因是被覆盖、inline塌陷、overflow裁剪或缺少border-style。
直接用 border 就行，但必须用 CSS，HTML5 已废弃 img 的 border 属性（比如 <img border="2"> 会校验失败）。
为什么 border: 2px solid blue 有时没反应？
常见原因不是写错了，而是被其他样式覆盖或盒模型干扰：
-
img元素默认是inline，上下边框可能“塌陷”，加display: block或vertical-align: top/middle可修复 - 父容器设置了
overflow: hidden，而边框超出图片原始尺寸时会被裁掉 - 有更高优先级的样式（比如外部 CSS 文件里写了
img { border: none }），内联style未必能覆盖 - 用了
box-sizing: content-box（默认值），边框会撑大总宽高；若需保持图片尺寸不变，得显式加box-sizing: border-box
border-color: blue 和 border: 2px solid #007bff 有啥区别？
没本质区别，但写法影响可维护性和精度：
-
border-color: blue单独设颜色，必须配合已存在的border-style和border-width才生效，否则无效（border-style是前提） -
border: 2px solid #007bff是简写，一次性定义三者，推荐日常使用 - 命名色如
blue浏览器渲染一致但选择少；十六进制如#007bff或rgb(0, 123, 255)更可控，也方便对接设计系统 - 别用
border-color: blue !important去硬顶，优先查层叠顺序和选择器权重
蓝色边框要圆角、阴影或响应式怎么办？
单靠 border 不够，得组合其他 CSS 属性：
立即学习“前端免费学习笔记（深入）”；
- 圆角：必须加
border-radius，例如border: 2px solid #007bff; border-radius: 8px;——outline不支持圆角，别用它 - 阴影：用
box-shadow，不是border的一部分，例如box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3); - 响应式边框：避免固定
px，改用em或rem，例如border: 0.125rem solid #007bff;，随根字体缩放 - 如果图片是链接（
<a href="..."><img></a>），点击后出现的蓝色虚线不是border，是a:focus的outline，得单独重置：a:focus { outline: none; } a:focus img { border: 2px solid #007bff; }
真正容易被忽略的是：蓝色边框在深色背景上可能对比度不足，WCAG 要求文本/图形边界至少 3:1；#007bff 在黑底上约 2.8:1，建议搭配 box-shadow 或提高亮度（如 #0096ff）来达标。
