最可靠方案是用 border: 2px solid #666;，需确保三值齐全、display 类型适配、box-sizing 正确，并避免用 outline 或 box-shadow 模拟。
直接用 border 属性加深灰色实线边框最可靠，border: 2px solid #666; 就够了；别用已废弃的 border HTML 属性，也别指望 outline 或 box-shadow 模拟出真正可控的实线。
用 border 写深灰色实线边框（推荐）
这是唯一语义正确、兼容性好、能精准控制粗细/颜色/样式的方案。深灰色常用 #666、#555 或 rgb(102, 102, 102)，实线必须带 solid 关键字。
-
border: 2px solid #666;—— 最简写法，三值缺一不可：宽度、样式、颜色 - 若图片是
inline元素（默认），上下边框可能被行高“吞掉”，建议加display: block;或display: inline-block; - 边框会增加元素总尺寸（盒模型为
content-box），如需保持原图宽高不变，得额外加box-sizing: border-box; - 示例：
<img src="a.jpg" alt="示例" style="max-width:90%">
border 不生效？先查这三处
深灰色边框“看不见”，通常不是颜色问题，而是 CSS 没真正应用上。
- 检查是否写了完整三元组：只写
border: 2px #666;缺solid，浏览器直接忽略整条声明 - 确认没有其他更高优先级规则覆盖，比如外部 CSS 里写了
img { border: none; }或重置库注入了border: 0; - 打开开发者工具（F12），选中图片，在 Computed 面板看最终生效的
border值，点右侧箭头溯源 - 表单类图片（如
<input type="image">）可能受系统主题干扰，需加appearance: none;并重置全部 border 相关属性
需要圆角+深灰边框？border-radius 必须配 border
单独加 border-radius 不会出圆角边框，它只是“裁切”边框拐角。必须和 border 同时存在才有效。
立即学习“前端免费学习笔记（深入）”；
- 顺序无关，但建议写在一起：
border: 2px solid #666; border-radius: 6px; - 如果图片用了
object-fit: cover;，且border-radius值较大，圆角可能被裁掉——此时要确保图片容器有足够内边距或改用包裹层 - 老版 Safari 对
inline图片的border-radius支持异常，显式设display: block;可规避 - 不支持“单边圆角”，比如只要左上+右下圆角，只能靠伪元素或额外
<div> 包裹实现 <h3>别碰 <code>outline和box-shadow模拟边框它们看起来像边框，但行为完全不同，用在正式页面里容易翻车。
-
outline不参与布局计算，无法设置单边，不支持border-radius，且高对比度模式下颜色会被系统强制替换 -
box-shadow: 0 0 0 2px #666;是绘制在元素上方的图层，可能遮挡文字、背景渐变，打印时经常不出现，缩放后像素模糊 - 调试时临时高亮可用，但交付代码里必须用
border—— 这是唯一能保证颜色、粗细、圆角、响应式缩放都稳定的方案
深灰色实线边框看着简单，但真正落地时，
display类型、盒模型、层叠权重、设备像素比（比如 Retina 屏上1px发虚）这些细节最容易被跳过。尤其是粘贴进 Word 或导出 PDF 时，CSS 边框根本不会带过去——那得走 Word 原生图片格式设置，跟 HTML 完全是两套逻辑。 -
