给img加border-radius最直接但需防裁切；伪元素方案可实现渐变边框，但须设父容器position:relative且适配高清屏。
border-radius 直接生效但可能被图片内容裁切
图片加圆角最直接的方式是给 <img> 元素本身加 border-radius，但要注意：如果父容器设置了 overflow: hidden，或者图片被包裹在有边框/阴影的容器里，圆角可能“看起来没生效”——其实是被裁掉了。更常见的是，图片加载后宽高撑开导致圆角失效（比如用 width: 100% 但没设 height: auto 或 object-fit: cover）。
实操建议：
- 优先给
<img>加border-radius: 8px（或你需要的值），并确保它没有被父级overflow: hidden意外截断 - 若图片需要响应式缩放，务必配合
object-fit: cover或contain，否则border-radius只作用在原始尺寸的边界上 - 避免对
<img>同时设置border和border-radius后再加box-shadow，阴影会绕过圆角边缘——这时该换伪元素方案
用 ::before 伪元素画边框时定位必须脱离文档流
伪元素方案本质是“盖一层带边框的遮罩”，所以 ::before 必须用 position: absolute，且父容器得是 position: relative。否则伪元素会出现在文档流顶部或底部，完全不贴合图片。
常见错误现象：
-
::before冒出来盖住了文字或其他元素——忘了给父容器加position: relative - 边框只显示一半——
top/left没设为0，或没设width: 100%; height: 100% - 圆角边框和图片错位——图片用了
display: block以外的值（比如默认inline），导致基线对齐产生间隙
最小可用示例：
img {
display: block;
border-radius: 12px;
}
img-wrapper {
position: relative;
display: inline-block;
}
img-wrapper::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 2px solid #666;
border-radius: 12px;
pointer-events: none;
}
伪元素边框在高清屏下容易发虚
用伪元素画边框本质是 CSS 渲染的矢量图形，但在 devicePixelRatio > 1 的屏幕（比如 Mac Retina、多数安卓旗舰）上，1px 边框常被渲染成 0.5px 物理像素，看起来模糊甚至消失。
解决方法不是简单加粗，而是适配像素比：
- 用
transform: scale(0.5)配合transform-origin做 2x 缩放还原（适合固定尺寸容器） - 更稳妥的是用媒体查询 +
border-width动态调整：@media (-webkit-min-device-pixel-ratio: 2) { ... border-width: 2px } - 如果边框只是装饰，不如改用
box-shadow: 0 0 0 2px #666——阴影天然抗锯齿，且不会受transform影响布局
img 标签无法直接加渐变边框，必须靠伪元素或 wrapper
原生 border 不支持 linear-gradient，所以想实现“彩色圆角边框”或“渐变描边”，border-radius + border 组合直接失效。
此时伪元素是唯一轻量解法（不用 JS、不改 HTML 结构）：
- 把渐变写在
::before的background上，再用mask或clip-path切出边框形状（兼容性注意：mask在 Safari 旧版需-webkit-mask） - 更通用的做法是用两层伪元素：一层
::before画背景+圆角，一层::after叠在上面挖空中间，露出图片——但性能略差 - 别试图用
outline替代，它不支持圆角，也不接受渐变
真正难的不是怎么画，是怎么让这个边框在图片缩放、加载失败、src 动态切换时依然稳住位置和尺寸——所有伪元素方案都依赖父容器尺寸稳定，这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
