cool，现在只需要一个 shape-outside 和 shape-image-threshold 就可以实现这样的图像 Alpha 通道环绕效果了。
以及，CSS shade-* 的支持已经 Baseline Widely available 广泛可用了。
Getting Creative With Images in Long-Form Content | CSS-Tricks
AI 摘要：本文探讨了如何在长篇内容（long-form content）中创造性地使用图片。作者认为图片不仅是插图工具，更能影响页面节奏、阅读体验和用户情绪。通过打破网格（grid）、使用全幅图像（full-bleed）、模块化布局（modular grid）、CSS Shapes、创意化图注（caption）以及留白（whitespace）管理，图片可以成为叙事与设计的一部分，从而提升文章的表现力与吸引力。
1. 引言：长内容与图片的关系
• 传统的内联矩形图片容易显得功能化但缺乏灵感
• 图片在长文本中应参与节奏与气氛塑造，而不是“附加元素”
2. 打破与利用 Grid（网格系统）
• 网格让排版平衡、整齐，利于阅读，但可能过于呆板
• 偶尔打破网格：扩大图片尺寸、偏移位置，可突出重点并增加灵动感
3. 图像宽度的处理：Text-width vs Full-bleed
• Text-width（跟随文本宽度）：适合信息图、图表，保持阅读秩序
• Full-bleed（全幅铺满）：制造视觉冲击力，打破阅读节奏，但不可滥用
4. Modular Grid（模块化网格）展示多图
• 通过网格组织多张图片构成整体布局，而非单调堆叠
• 可以混合横幅与竖幅图，用大小对比制造层次感，突出相关性
5. CSS Shapes 与文本环绕
• 传统文本环绕矩形边框，可能与图片形状不匹配
• CSS shape-outside 可让文字依据图片轮廓流动，更加自然、富有- 有表现力
• 利用图片 alpha 通道直接定义形状，减少复杂路径
6. Captions（图注）的再设计
• 不必是小字附注，它们可以是故事叙述的主动元素
• 图注可放置在图片侧边、覆盖图片，甚至作为装饰化的 pull quote
7. Whitespace（留白）的作用
• 紧密留白：制造张力，适合多图组合
• 宽松留白：形成停顿，让内容节奏更舒缓
• 留白是页面呼吸感与层次控制的重要因素
author Andy Clarke
