不能直接用 border-image-source 实现重复平铺，必须配合 border-image-repeat: repeat 才能真正平铺，否则默认拉伸；且需确保图像无缝、slice 值匹配边框宽度，并设 border 为 transparent。
border-image-source 能否实现边框平铺？
不能直接用 border-image-source 实现“重复平铺”效果——它本身依赖 border-image-slice 切割图像，且默认行为是拉伸（stretch），不是平铺（repeat）。要真正平铺，必须显式设置 border-image-repeat 为 repeat，否则即使图像是小纹理，也会被拉伸变形。
border-image-repeat: repeat 的实际表现与限制
该属性控制边框图像在水平和垂直方向的填充方式，取值包括 repeat、round、space 和 stretch。只有 repeat 是严格意义上的“重复平铺”，但要注意：
-
repeat会完整复制图像，不缩放也不裁剪，可能导致边缘出现半截图案（尤其当边框宽度不能被图像高度整除时） - 左右边框（vertical）和上下边框（horizontal）可分别设置，例如：
border-image-repeat: repeat space - 若图像尺寸过小（如 4×4 像素），高频重复可能产生摩尔纹或渲染模糊，建议用至少 8×8 无压缩 PNG
完整可用的 CSS 边框平铺代码示例
以下是最小可行配置，确保图像沿边框完整重复，不拉伸、不留空：
div {
border: 20px solid transparent;
border-image-source: url("frame-tile.png");
border-image-slice: 20 fill;
border-image-width: 20px;
border-image-repeat: repeat;
}
关键点说明：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
border必须设为transparent，否则纯色边框会遮盖图像 -
border-image-slice: 20 fill中的20应等于border-image-width，保证四角不被误切 -
fill关键字允许图像内容延伸到边框内区（非必需，但常用于装饰性边框）
替代方案：background-clip + background 可能更可控
当 border-image 行为难以调试（比如 Safari 对 border-image-slice fill 支持不稳定），可用 background 模拟边框平铺：
div {
padding: 20px;
background:
linear-gradient(#000, #000) left top / 20px 100% no-repeat,
linear-gradient(#000, #000) right top / 20px 100% no-repeat,
linear-gradient(#000, #000) left top / 100% 20px no-repeat,
linear-gradient(#000, #000) left bottom / 100% 20px no-repeat,
url("tile.png");
background-clip: padding-box, padding-box, padding-box, padding-box, content-box;
background-origin: border-box;
}
这个方案绕开 border-image 兼容性问题，但维护成本高；适合需要精确控制每条边平铺起始位置的场景。
真正容易被忽略的是：所有平铺行为都依赖图像本身的无缝性。哪怕只有一像素接缝错位，整个边框就会出现明显断层——务必用图像编辑器检查 tile 边缘是否真正对齐。
