给图片加白色实线圆角框需用 border 和 border-radius，推荐在 img 上设 border: 2px solid #fff; border-radius: 6px; display: block;，或用 class 统一管理；注意背景对比、padding 或 box-sizing 防裁切，兼容性良好。
给图片加白色实线圆角框，核心是用 CSS 的 border 和 border-radius 属性，配合合适的背景或容器处理，避免白边被裁切。
直接在 img 标签上加样式
最简方式：在 <img> 标签的 style 属性里写：
- border: 2px solid #fff; —— 白色实线边框，粗细可调（如 1px、3px）
-
border-radius: 8px; —— 圆角大小，数值越大越圆润（也可用
50%变成正圆，但仅对等宽高图片生效） - 建议加上 display: block; 防止底部出现空白间隙（因 img 默认 inline 元素）
示例代码：
<img src="photo.jpg" alt="示例图" style="border: 2px solid #fff; border-radius: 6px; display: block;">用 class 统一管理更灵活
适合多张图或需要复用样式的情况。先在 HTML 中写：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg" alt="示例图" class="white-round-frame">再在 <style> 或 CSS 文件中定义：
border: 2px solid #ffffff;
border-radius: 4px;
display: block;
}
注意背景色和留白
白色边框在浅色背景下可能不明显，确保父容器有深色背景（如灰色），或给图片加一点内边距：
- 加 padding: 2px;（需同时设
box-sizing: border-box;，否则会撑大尺寸） - 或用 background-color: #f0f0f0; 做衬底，让白边更清晰
- 若图片本身带透明背景（如 PNG），白框会直接显示，无需额外处理
兼容老浏览器的小提醒
border-radius 在 IE9+ 和所有现代浏览器都支持，border 更无兼容问题。如需支持 IE8 及更早版本，需用图片切角或 JS 方案，但目前已极少需要。
