直接用 border + border-radius 实现白色圆角边框需设 display: block 和 box-sizing: border-box，否则图片错位、白边裁切或布局崩塌；内联样式要写全 border 三要素，圆角值推荐 px 单位，长图慎用 50%。
直接用 border + border-radius 就能实现干净的白色圆角边框，但必须加 display: block 和 box-sizing: border-box，否则图片会错位、白边被裁切或布局崩掉。
img 标签上直接写 style 最快，但要注意三件事
内联样式适合单图快速调试，但容易漏掉关键控制点：
-
display: block必须加——img默认是inline元素，底部会留空白间隙，白边看起来像“悬空” -
box-sizing: border-box必须加——否则border会额外撑大尺寸，比如设了width: 300px再加2px solid #fff，实际占宽变成 304px - 白色边框在白背景里看不见，得确保父容器有深色背景，或给
img加padding: 2px（同时配box-sizing: border-box）来“挤出”一点对比空间
正确写法示例：
@@##@@
用 class 统一管理更可靠，尤其多图场景
把样式抽到 CSS 中，避免重复、便于维护，也方便后续加响应式或动画：
- 定义 class 时别漏
display: block和box-sizing: border-box，这两项不是可选，是刚需 - 圆角值用
px比%更可控；border-radius: 50%只对正方形图有效，长图会变椭圆边框 - 如果图是 PNG 透明底，白边会直接透出，无需额外处理；但 JPG 图若背景不纯白，白边和原图交界处可能显灰边，这时建议加
background-color: #f8f8f8做衬底
CSS 示例：
.white-frame {<br> border: 2px solid #ffffff;<br> border-radius: 4px;<br> display: block;<br> box-sizing: border-box;<br>}
border 写法顺序错了会失效，颜色/宽度/样式缺一不可
border 是简写属性，浏览器只认“宽度 + 样式 + 颜色”三要素齐全的组合：
- 合法：
border: 2px solid #fff、border: solid 2px #fff、border: #fff solid 2px - 非法：
border: 2px #fff（缺样式，默认none）、border: solid #fff（缺宽度，不渲染） - 只想加某一边？用单边属性更安全：
border-bottom: 2px solid #fff，它不会影响其他三边 - 清除某一边别写
border-top: 0，语义不清且旧版 IE 不认，改用border-top: none
白边被裁切？大概率是没设 box-sizing 或 padding 冲突
常见现象：加了 border-radius 后圆角处白边消失、图片边缘被截断。原因通常是：
- 容器（如
div）设置了overflow: hidden，但没配box-sizing: border-box，导致边框溢出被剪掉 - 给
img加了padding却没设box-sizing: border-box，padding + border 超出设定宽高 - 父容器用了
max-width但没同步调整border占比，响应式缩放时白边比例失衡
解法统一：所有带 border 或 padding 的 img，都加上 box-sizing: border-box。这是最省事、兼容性最好的兜底方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
