AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…