移动端遮罩图水平拉伸变形？检查 -webkit-mask-repeat-x 的 round 值

确认 round 值的拉伸与压缩机制

-webkit-mask-repeat-x 的 round 值会让重复的遮罩图在空间变大时拉伸，直到能放下下一张图，然后所有图会压缩以腾出空间。例如，原始宽度 260px 的图重复三次，可能会拉伸到每张 300px 宽，直到能放下第四张，然后所有图压缩到 225px。

这种机制意味着当容器宽度变化时，图片会自动调整大小以填满空间，可能导致视觉上的拉伸或压缩变形。如果遮罩图本身有细节，这种变化会非常明显，需要确认是否是预期的视觉效果。检查时需关注容器宽度变化与图片原始尺寸的匹配情况。

检查步骤：在浏览器开发者工具中，选中使用 round 值的元素，查看其计算后的宽度与遮罩图的原始宽度。如果容器宽度变化导致图片被拉伸或压缩，说明 round 值正在生效。例如，容器宽度从 900px 变为 1000px 时，图片可能从 300px 拉伸到 250px。

判断结果：如果图片拉伸或压缩后出现模糊或细节丢失，说明 round 值的机制导致了变形。此时可以尝试将 round 改为 repeat 或 no-repeat，观察是否恢复原始尺寸。如果问题依旧，可能是遮罩图本身尺寸不适合 round 值的重复方式。

验证方法：在 CSS 中临时将 -webkit-mask-repeat-x 改为 repeat，观察遮罩图是否恢复原始尺寸。如果 repeat 模式下图片清晰且无变形，说明 round 值是导致问题的原因。此时可以调整容器宽度或遮罩图尺寸，使其更适合 round 值的重复方式。

注意事项：round 值是非标准属性，浏览器支持有限，且可能随版本变化。如果问题依然存在，建议使用标准属性如 background-repeat 或其他遮罩技术。检查时需确认浏览器兼容性，避免在旧版浏览器中出现意外行为。

操作步骤：如果确认 round 值导致变形，可以尝试调整遮罩图的原始尺寸，使其与容器宽度变化时的拉伸或压缩幅度匹配。例如，将图片宽度设置为容器宽度的整数倍，避免非整数倍拉伸。或者使用 repeat 值替代 round 值，保持图片原始尺寸。

最终检查：调整后重新加载页面，观察遮罩图是否恢复清晰且无变形。如果问题解决，说明 round 值的机制不适合当前场景。如果问题依旧，可能是其他 CSS 属性或浏览器兼容性问题，需要进一步排查。确保调整后的代码符合浏览器兼容性要求。