真正可靠的做法是用 border-radius 切出圆角，再通过伪元素或父容器叠加一层带透明度的遮罩层：方法一用父容器+伪元素遮罩，方法二用 clip-path 配合背景色，方法三用 box-shadow 模拟柔边效果。
直接用 CSS 的 border-radius 和 opacity 不能实现「图片本身带圆角 + 背景层有透明度」的精准效果，因为 opacity 会让整个图片（包括内容）变透明。真正可靠的做法是：**用 border-radius 切出圆角，再通过伪元素或父容器叠加一层带透明度的遮罩层**。
方法一：用父容器 + 半透明背景遮罩（推荐）
给图片套一个容器，容器设圆角，再用伪元素（如 ::after）覆盖一层半透明色块：
<div class="rounded-img-container"> <img src="example.jpg" alt="示例图"> </div>
.rounded-img-container {
width: 300px;
height: 200px;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.rounded-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.rounded-img-container::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4); /* 黑色 40% 透明度 */
pointer-events: none;
}✅ 优点：圆角干净、遮罩可调、不影响图片清晰度；❌ 注意：遮罩是纯色，不改变图片本身透明度。
方法二：用 clip-path 配合背景色（适合纯色背景）
如果页面背景是单一颜色（比如白色），可用 clip-path 做圆角裁剪，再给图片加半透明背景：
立即学习“前端免费学习笔记（深入）”；
<img class="clipped-img" src="example.jpg" alt="示例图">
.clipped-img {
width: 300px;
height: 200px;
object-fit: cover;
border-radius: 20px; /* 兼容性兜底 */
clip-path: round(20px); /* Chrome/Firefox/Edge 支持 */
background-color: rgba(255, 255, 255, 0.7); /* 白底+70%不透明，让图显得“淡”些 */
}⚠️ 注意：clip-path: round() 圆角值必须是长度单位（如 20px），不支持百分比；旧版 Safari 需用 clip-path: circle() 或 polygon() 模拟。
方法三：用 box-shadow 模拟发光/柔边效果（非真透明，但视觉柔和）
如果目标是让圆角边缘看起来更柔和、略带“透光感”，可用内阴影模拟：
.soft-rounded-img {
width: 300px;
height: 200px;
border-radius: 20px;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
}
.soft-rounded-img img {
width: 100%;
height: 100%;
object-fit: cover;
}? 这不是真正改变透明度，但能弱化边缘生硬感，适合浅色背景下的图片展示。
关键记住：图片元素本身不支持「局部透明圆角」，所有方案本质都是「视觉合成」——靠容器、遮罩、裁剪或阴影组合达成效果。选哪种，取决于你是否需要交互（如点击穿透）、是否要保留图片可访问性、以及兼容性要求。
