应使用 css border 属性设置图片边框，必须同时指定宽度、样式和颜色三要素，如 border: 2px solid #ff6b6b；单独设置 border-color 或 border-width 无效，且需配合 box-sizing: border-box 防止布局溢出。
img 标签本身没有内置边框颜色属性，必须用 CSS 控制。直接写 border 就行，但要注意默认不显示——得同时指定样式和宽度，否则颜色无效。
用 border 设置图片边框颜色（最常用）
边框由三部分组成：宽度、样式、颜色。缺一不可，只设 color 或只设 width 都不会出框。
-
border: 2px solid #ff6b6b;是完整写法，推荐初学者用 - 如果已用
border-width和border-style分开定义，那border-color才生效 - 别用
border-color单独写——没宽度和样式，浏览器当“无边框”处理 - 支持简写值如
border: 1px dashed red;，颜色可写关键字、十六进制、rgb() 等
给特定图片加边框：用 class 还是 style？
内联 style 快速测试可以，但项目里别滥用；用 class 更可控、易复用、方便后期批量调整。
- HTML 中写：
<img src="a.jpg" class="framed"> - CSS 中写：
.framed { border: 3px ridge #4a5568; } - 避免用
id控制样式——除非该图片全局唯一且逻辑上必须独立定制 - 如果边框要响应式变化（比如小屏变细），
class+ 媒体查询比内联更可靠
边框影响图片尺寸？box-sizing 很关键
默认 box-sizing: content-box，边框会额外增加图片总宽高，可能撑破容器或破坏布局。
- 加边框后图片错位、换行、溢出？大概率是这个原因
- 统一加上：
img { box-sizing: border-box; }，让宽高包含边框和内边距 - 注意：IE8 及更早版本不支持
border-box，但现代项目基本不用考虑 - 如果只针对某几张图，就写
.framed { box-sizing: border-box; }
真正容易被忽略的不是怎么写颜色，而是边框是否参与盒模型计算、是否被父容器 overflow: hidden 截断、以及 border-radius 和边框颜色叠加时的渲染一致性——这些不报错，但会让效果和预期差一截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
