用CSS的border和border-radius属性可为图片添加带圆角的灰色实线外框，推荐通过类名统一管理样式，并配合display: inline-block确保边框完整包裹图片。
给图片加带圆角的灰色实线外框，主要用 CSS 的 border 和 border-radius 属性，配合 display: inline-block（可选，用于确保边框包裹图片）即可实现。
基础写法：直接在 img 标签上加内联样式
最简单的方式是用 style 属性写在 <img> 标签里：
-
border: 2px solid #888表示 2 像素宽、实线、灰色（#888 是中灰，比 #ccc 深一点，比 #666 浅一点） -
border-radius: 8px让四个角都变成半径为 8 像素的圆角；也可写成border-radius: 4px 8px 4px 8px分别控制左上、右上、右下、左下
推荐写法：用 CSS 类统一管理样式
更规范的做法是把样式抽离到 CSS 中，便于复用和维护：
然后在 <style> 或外部 CSS 文件中定义：
立即学习“前端免费学习笔记（深入）”；
.rounded-gray-border {border: 2px solid #888;
border-radius: 6px;
display: inline-block; /* 可选，避免文字环绕时边框塌陷 */
}
注意几个实用细节
- 如果图片是行内元素（默认），且周围有文字，加
display: inline-block能让边框完整包裹图片，不被基线对齐影响 - 想让边框和图片之间留点空隙？加
padding: 4px，但注意这会增大整体尺寸；更常用的是用margin控制外边距 - 灰色可按需调整：
#ccc（浅灰）、#999（中灰偏亮）、#666（偏暗） - 圆角数值越大，越圆润；设为
50%就变成正圆（前提是图片宽高相等）
兼容性说明
border-radius 和 border 在所有现代浏览器（Chrome、Firefox、Safari、Edge）及 IE9+ 都完全支持，无需前缀，放心使用。
