直接为设置border和border-radius即可实现圆角蓝边，但需加display: block（或inline-block/vertical-align: top）避免底部留白；若失效，常见原因包括父容器overflow: hidden未配合宽高、ie11兼容问题（需外包div并设overflow: hidden），推荐用css类如.img-rounded-blue统一管理样式。
用 border-radius 和 border 一起设置圆角蓝边
直接给 <img> 元素加 border 和 border-radius 就行，但要注意：圆角生效的前提是图片不能是内联元素默认行为干扰的“非块级”状态。多数情况下加 display: block 更稳。
-
border: 2px solid #007bff—— 蓝色边框（#007bff是 Bootstrap 默认主蓝，也可换blue或其他） -
border-radius: 8px—— 四角统一圆角；想左上/右下不同，用border-radius: 8px 4px 8px 4px - 务必加
display: block或vertical-align: top，否则底部可能留白（因图片默认vertical-align: baseline）
为什么有时 border-radius 对图片没反应？
常见原因是图片被包裹在 <a></a> 或其他 inline 元素里，或者父容器有 overflow: hidden 但图片本身没设宽高——这时圆角会被裁掉或不渲染。更隐蔽的是：部分老浏览器（如 IE11）对 img 的 border-radius 支持不稳定，需加 overflow: hidden 到父容器兜底。
- 检查是否漏了
display: block或inline-block - 如果图片是响应式（比如用了
max-width: 100%），确保父容器有明确宽度，否则border-radius计算可能异常 - 真要兼容 IE11，套一层
<div style="border-radius: 8px; overflow: hidden;"><img></div>
用 CSS 类批量控制，别写一堆内联样式
实际项目里，重复写 border、border-radius 很容易漏或不一致。建议抽成类名，比如 .img-rounded-blue，再通过 class 控制。
img.img-rounded-blue {
display: block;
border: 2px solid #007bff;
border-radius: 6px;
margin: 4px auto;
}
- 加
margin是为了和文字或其他元素保持呼吸感 - 如果某些图需要不同粗细或颜色，可扩展为
.img-blue-sm、.img-blue-lg等 - 避免用
!important覆盖，优先靠选择器权重或顺序管理
注意图片格式和透明背景对边框观感的影响
如果图片本身带 alpha 通道（比如 PNG 透明底），蓝色边框会清晰可见；但如果是 JPG 白底图，边框就只在图边缘起作用，视觉上像“贴边”，容易显得突兀。这时候可以考虑加点 padding 或用 box-shadow 替代纯边框。
- 想让边框“浮起来”，试试：
box-shadow: 0 0 0 2px #007bff（无模糊、无偏移的描边效果） - 若需内边距+边框组合，用
padding: 4px+border，但记得加box-sizing: border-box防止宽高溢出 - SVG 图片同样支持这些 CSS，但需确保它是通过
<img src="x.svg">引入，而非内联 SVG，否则样式规则可能不继承
outline: 1px dashed red 临时加上去，一眼就能看出盒子边界到底在哪。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
