HTML5如何设置边框重复平铺_HTML5设置边框重复平铺技巧【平铺】

不能直接用 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;
}

关键点说明：

• 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 边缘是否真正对齐。