background-repeat: round 行为是自动缩放背景图以填满容器且不留白、不裁切，每张图等比缩放并边缘对齐；需配合明确容器尺寸且不设置 background-size 才生效。
background-repeat: round 是什么行为
background-repeat: round 不是“让图片变圆”或“四舍五入尺寸”，而是让背景图在容器内**自动缩放并重复铺满，且不裁切、不留白**。浏览器会先尝试用原图平铺，若最后一张图超出边界，就整体缩小所有副本，直到刚好填满——每张图等比缩放，边缘对齐容器边界。
它适合用于图标网格、装饰性纹理等需要严丝合缝的场景，但对内容敏感的图片（比如带文字的 banner）容易因缩放失真。
为什么 background-repeat: round 没生效
常见失效原因不是写法错，而是没配合同步控制：
-
background-size被显式设为固定值（如100px 100px），会覆盖round的自动缩放逻辑 - 容器宽高为
auto或未设置（比如div无内容/无高度），导致铺排失去参照系 - 背景图本身尺寸过小（如 1×1 像素），
round缩放后可能肉眼不可见 - 使用了
background-attachment: fixed，部分浏览器（特别是 Safari）会忽略round
如何正确写一个可用的 round 平铺示例
关键在于「只声明 repeat-round，不碰 background-size」，并确保容器有明确尺寸：
.tile-area {
width: 320px;
height: 240px;
background-image: url("dot.png"); /* 例如 8×8 的小圆点 */
background-repeat: round;
background-position: top left;
}
如果想强制横向 round、纵向 repeat（或反之），可拆开写：
-
background-repeat: round repeat;→ 横向 round，纵向常规重复 -
background-repeat: repeat round;→ 横向常规重复，纵向 round
注意：不能写成 round space 或混用其他关键字，round 只能和 repeat 或 no-repeat 组合。
round 和 space 的实际差异在哪
两者都避免裁切，但处理留白方式相反：
-
round：缩放图片 → 填满容器，不留空隙，但图会变小 -
space：保持原图尺寸 → 在图之间加等距间隙，首尾贴边，图不变形
比如容器宽 300px，图宽 100px：round 可能把图缩到 ~99.5px 铺三张；space 则保持 100px，两张图 + 中间 100px 空隙。用哪个取决于你更在意“图是否清晰”还是“边缘是否对齐”。
真正难调的其实是缩放后的像素对齐——round 计算出的尺寸常带小数，可能引发模糊或 subpixel 渲染抖动，上线前务必在目标设备上实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
