必须配border-width才生效，最小配置为border（或border-width+border-style）+border-image-source+border-image-slice；仅写source或slice无效，border:none或缺width/style均导致失效。
border-image 必须配 border-width 才生效
只写 border-image-source 或只写 border-image-slice，边框根本不会显示——浏览器直接忽略。真正起作用的最小配置是：border（或 border-width + border-style） + border-image-source + border-image-slice。
常见错误：
-
border: none或border: 0：彻底关闭边框渲染通道，border-image失效 -
border: solid不写宽度：CSS 规范要求 width 不能为 auto 或 missing，必须有明确像素值（如20px） - 用
transparent颜色时漏掉border-style：只写border: 20px transparent不合法，应写成border: 20px solid transparent
border-image-slice 数值必须 ≤ 图片尺寸
border-image-slice 按像素切图，四个值（上右下左）任意一个超过原图对应方向的尺寸，整个边框就会退化为纯色 fallback（通常是 border-color 或透明），控制台也不报错，极难排查。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先用图片编辑器量一下素材尺寸，比如
frame.png是 120×120px，那border-image-slice: 30安全，border-image-slice: 50就可能出问题 - 切图值不带单位默认是 px，写成
border-image-slice: 30px反而会失效（CSS 规范不支持带单位） - 如果图带内边距或透明区域，切多了会把内容区误当边框；切少了会导致角落拉伸变形或拼接缝隙
border-image-repeat 推荐用 round 而非 stretch
border-image-repeat: stretch 容易让边框边缘拉糊、失真，尤其文字按钮附近；round 会自动缩放平铺单元以填满边长，视觉更稳定，适配不同宽高元素。
使用场景差异：
-
repeat：适合规则几何纹样，但需注意边缘对齐，否则出现错位白缝 -
round：推荐用于大多数图案边框（如花边、徽章、手绘框），自动适配无撕裂 -
stretch：仅在明确需要单次拉伸且图像本身足够高清时考虑，慎用
示例：border-image: url("frame.png") 30 round / 20px —— 这里 / 20px 是 border-image-width 的简写，等价于 border-image-width: 20px。
跨域图片和本地文件协议限制
开发时用 file:// 协议打开 HTML，或图片资源跨域未配 CORS，border-image-source 会静默失败：边框不显示，控制台通常没报错，只有 Network 面板能看到 403 或 blocked 调用。
验证方法：
- 把图片转成 data URL 直接嵌入（适合小图）：
border-image-source: url("data:image/png;base64,iVBOR..."); - 改用本地服务器（如
python3 -m http.server）访问页面 - 检查图片响应头是否含
Access-Control-Allow-Origin: *
这个限制不像 <img alt="HTML中如何使用border-image设置图片边框" > 标签那样有 fallback 提示，容易卡在“为什么明明路径对就是不显示”。
