CSS圆角在大图展示中的应用_为图片添加柔和边缘

img 标签直接设 border-radius 在现代浏览器（chrome 90+、firefox 88+、safari 15.4+）有效，但 ie 不支持、旧版 safari 会漏直角；最佳兼容方案是用外层 div 包裹并设 border-radius 和 overflow: hidden。

border-radius 用在 img 标签上为什么没效果？

因为 img 是替换元素（replaced element），默认不响应 overflow 隐藏，圆角只裁剪盒模型边界，不裁剪图片内容本身——除非你显式触发层叠上下文或包裹容器。

• 最简方案：给 img 加 display: block + overflow: hidden（但无效，img 不支持 overflow）
• 真正有效的是：用外层 <div> 包裹 <code>img，对 div 设 border-radius 和 overflow: hidden
• 或者直接对 img 设 border-radius —— 现代浏览器（Chrome 90+、Firefox 88+、Safari 15.4+）已原生支持，但 IE 完全不支持，旧版 Safari 会漏出直角

大图展示时 border-radius 导致边缘模糊或锯齿

这是 GPU 渲染未对齐像素导致的亚像素渲染问题，尤其在高 DPI 屏幕或缩放比例非 100% 时明显。

• 避免用小数 border-radius 值，比如 12.5px；优先用整数，如 12px 或 13px
• 加 image-rendering: -webkit-optimize-contrast 或 image-rendering: crisp-edges 可缓解，但会牺牲平滑度
• 如果图片是背景图（background-image），用 background-clip: padding-box 确保圆角裁剪不被边框干扰

如何让圆角适配不同尺寸的大图（响应式）

固定像素值（如 border-radius: 16px）在小屏上显得过重，大屏上又太弱；百分比值（如 border-radius: 5%）更合理，但需注意基准是盒模型宽高，不是图片原始尺寸。

• 推荐用 border-radius: 4% ~ 8%，在多数视口下视觉柔和度较稳定
• 若用 Object-fit: cover 居中裁剪大图，border-radius 依然基于容器生效，无需额外处理
• 慎用 border-radius: 50%：当容器宽高不等时，会变成椭圆而非正圆，大图容易失衡

Filter: blur() 和 border-radius 同时用的坑

filter 会强制创建新层叠上下文，并可能让 border-radius 裁剪失效——圆角还在，但模糊溢出到外部。

立即学习“前端免费学习笔记（深入）”；

• 解决方法：把 filter 放在外层容器，border-radius 也设在外层，内层 img 不设任何圆角
• 或者改用 backdrop-filter（仅适用于背景模糊场景）
• 测试时务必在真机 Safari 上验证：ios 15.4 之前，filter + border-radius 组合常出现渲染撕裂

圆角看着简单，但和图片尺寸、渲染上下文、设备像素比搅在一起，很容易在某个机型上突然“破功”。特别是做全平台大图画廊时，别只盯着 Chrome 开发者工具看。