Responsive List of Stacked/Overlapping Images
AI 摘要：这篇文章展示了如何用现代 CSS 的新特性（如 container-type 与 cqw 单位）构建一个响应式的重叠头像列表。图片间的间距可根据容器宽度与元素数量自动调整，无需固定值或“魔法数字”；布局既灵活，又保持了视觉平衡。文中还提供了带悬停（hover）扩展效果的版本，进一步展示了纯 CSS 控制重叠视觉的潜力。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 核心概念与实现思路
• 使用现代 CSS 变量与计算函数创建动态间距。
• 通过 container-type: inline-size 让容器对宽度变化作出响应。
• 利用 mask 实现图像重叠区域的透明过渡效果。
• 通过 min() 函数计算图片间距，使布局在不同视窗宽度下自适应变化。
2. 代码结构与关键属性解释
• 定义变量 --s（图片尺寸）与 --g（间距），使布局参数可控。
• --_m 计算自动间距，基于容器宽度和兄弟元素数量动态得出。
• mask 与 radial-gradient 相结合，用于实现圆形图片之间的重叠柔和过渡。
• reverse 类切换重叠方向，通过改变 --_r 来调整遮罩中心。
3. 响应式与交互特性
• 重叠间距随容器宽度自动变化，无需媒体查询。
• 示例中展示悬停展开的交互版本，该效果仅在图片重叠时触发。
• 动画与布局计算完全基于 CSS，无需 JavaScript。
4. 延伸阅读与相关主题
• Dynamic Tooltip Position with Anchor Positioning III：介绍基于锚点定位的动态提示气泡。
• Alignment in Anchor Positioning using position-area：互动示例，讲解如何利用 position-area 控制对齐方式。
