使用 border-image 可以在不改变元素尺寸的前提下实现复杂边框，核心做法是设置 border-width、border-style: solid 以及 border-image-source，并通过 border-image-slice 定义切片区域，用 border-image-repeat 控制平铺方式。这样浏览器会将图片按指定规则渲染在边框区域，而不会像传统 padding 或伪元素那样影响盒模型布局。
如何正确设置 border-image-slice 避免拉伸变形？
直接回答：将 border-image-slice 设置为数值（如 30）并配合 fill 关键字，可以确保中心区域被保留用于背景填充，而四角和边线按原图比例渲染，避免整体拉伸。关键在于理解切片值对应的是从边缘向内偏移的像素数，且必须与 border-width 协调一致。
div {
width: 200px;
height: 100px;
border-width: 30px;
border-style: solid;
border-image-source: url('border.png');
border-image-slice: 30 fill;
border-image-repeat: round;
}
上述代码中，border.png 应是一个包含九宫格结构的图片，30 表示从每边向内切 30 像素，fill 表示中心部分也参与渲染（通常用于背景），round 表示边线部分通过重复拼接适应长度。若图片尺寸与 border-width 不匹配，可能出现模糊或断裂，需调整切片值或更换高分辨率素材。
当边框内容超出时，border-image-repeat 如何选择以维持视觉完整？
直接回答：根据容器宽度动态选择 repeat、round 或 stretch。repeat 会截断多余部分，round 会缩放单元以完整填充，stretch 则强制拉伸。对于装饰性边框，推荐 round 以保持图案完整性；对于线性纹理，repeat 更自然。
/* 示例：使用 round 模式适应不同宽度 */
.box-round {
border-image-repeat: round;
}
/* 示例：使用 repeat 模式保持原始比例 */
.box-repeat {
border-image-repeat: repeat;
}
在实际项目中，若边框图案为对称花纹，round 能自动计算最佳重复次数，避免边缘残缺；若为连续线条（如虚线效果），repeat 更符合直觉。注意：stretch 会导致图案变形，仅适用于非对称或抽象设计。测试时应覆盖最小和最大容器宽度，观察边界处的拼接情况。
基于 border-image-slice 值为 0 时的具体行为是什么？
直接回答：当 border-image-slice 设为 0 时，整个图片被视为“边线”部分，中心无独立区域，导致 fill 无效，边框完全由图片边缘构成，可能产生重叠或空白。此时若 border-width 大于图片尺寸，会出现透明间隙。
div {
border-image-slice: 0;
border-image-source: url('small-border.png');
border-width: 50px;
border-image-repeat: stretch;
}
该配置下，small-border.png 若尺寸为 40x40 像素，而 border-width 为 50 像素，则边框中间将出现 10 像素的透明带，因为切片为 0 意味着没有“内部”区域可填充。解决方案是增大切片值至图片半高，或改用 border-image-outset 扩展渲染范围。验证方法：检查开发者工具中的边框渲染层，确认是否存在透明像素区间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
