给图片加白色实线圆角框需用 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 元素）
示例代码：
用 class 统一管理更灵活
适合多张图或需要复用样式的情况。先在 HTML 中写：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
再在 <style></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 方案，但目前已极少需要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
