CSS object-fit 与 object-position：媒体裁剪与填充策略
介绍 `object-fit/object-position` 在图片与视频上的应用，选择合适的裁剪/填充策略并精确对齐兴趣区域，提升画面与版式的一致性与可用性。
编程开发
CSS object-fit 与 object-position：媒体裁剪与定位
使用 `object-fit` 与 `object-position` 控制图片与视频在容器中的裁剪与定位，改善响应式布局与视觉对齐。
CSS overflow-anchor：滚动锚定与内容插入的稳定性
说明滚动锚定机制与 `overflow-anchor` 属性的控制，在动态内容插入时避免滚动位置意外跳动，提升阅读与交互稳定性，并给出适用场景与示例。
CSS overscroll-behavior：滚动链与回弹治理
使用 overscroll-behavior 控制滚动链与回弹，避免内部容器滚动引发页面滚动或系统回弹，提升模态与触控体验。
CSS pointer-events：命中测试与交互治理
说明 `pointer-events` 的行为与应用，在叠加层/遮罩/图形场景控制命中测试与事件穿透，提升交互可用性并减少误操作。
CSS scroll-behavior：平滑滚动与可访问协作
说明 `scroll-behavior` 的平滑滚动效果与用户偏好协作，结合 `prefers-reduced-motion` 与锚点控制，提升导航体验并兼顾可访问性。
CSS scroll-behavior：平滑滚动与可访问性实践
使用 `scroll-behavior: smooth` 提供平滑滚动体验，结合动效偏好与锚点控制，保证可访问性与性能。
CSS scroll-snap：滚动捕捉与分页体验
使用 CSS scroll-snap 构建分页式滚动与精确对齐，结合 scroll-padding/scroll-margin 提升触控体验与定位稳定性。
CSS scrollbar-gutter：滚动条占位与布局稳定
说明 `scrollbar-gutter` 的行为与用法，通过为滚动容器保留滚动条占位，提高跨平台布局稳定性，减少因滚动条出现/消失导致的抖动（CLS）。
CSS shape-outside：文本环绕与图文排版
说明 `shape-outside` 与 `shape-margin` 的用法，让文本沿自定义形状环绕排版，支持圆形/椭圆/路径等，提升图文版式表达并给出兼容与性能建议。
CSS 代码组织：@layer 与 @scope 协同实践
将 @layer 的层次治理与 @scope 的作用域控制协同使用，构建可维护的样式架构并减少权重竞争与污染。
CSS 可变字体：font-variation-settings 与 opsz wght wdth
使用可变字体的轴控制与 `font-variation-settings`/`font-optical-sizing` 构建一致且灵活的排版系统，并给出性能与兼容建议。
CSS 可见性优化：content-visibility 与 contain-intrinsic-size
介绍 content-visibility 跳过屏外渲染与 contain-intrinsic-size 的固有尺寸提示，给出在长页面/瀑布流中的工程实践与边界。
CSS 响应式背景图：image-set() 与分辨率选择
介绍 CSS `image-set()` 在背景与内容图片上的用法，根据设备像素密度选择最优资源，结合 AVIF/WebP 与 MIME，提升画质与性能。
CSS 图像遮罩与裁剪：mask 与 clip-path 的性能与兼容
介绍 `mask` 与 `clip-path` 的差异与用法，使用基本形状与 SVG 路径实现遮罩与裁剪，说明性能边界与跨浏览器兼容策略，提供示例与参考。
