border-image 本身不改变盒模型尺寸，但必须显式声明 border-width 才能生效；漏写会导致布局偏移；建议用 border: 1px solid transparent 占位，并统一使用百分比定义 border-image-slice，优先考虑 linear-gradient 实现高清边框。
border-image 本身不改变盒模型尺寸，但 border-width 必须显式声明
很多人发现加了 border-image 后布局“移位”或元素变大，其实不是 border-image 在撑开盒子，而是漏写了 border-width。CSS 规范要求：只有当 border-width（或其简写 border）被明确设为非零值时，border-image 才会渲染；否则浏览器直接忽略整个边框逻辑，退回到无边框状态——这会让元素突然“缩回去”，造成视觉偏移。
实操建议：
- 始终用
border: 1px solid transparent占位，再叠加border-image，确保盒模型尺寸稳定 - 避免只写
border-image: url(...) 30;而不配border-width，这种写法在 Safari 和旧版 Chrome 中可能完全不显示边框 -
border-width值不一定要和图片切片匹配，它只控制“边框区域”的占用宽度，而border-image是贴在这个区域里绘制的
border-image-slice 用百分比而非像素，避免跨图尺寸失准
写 border-image-slice: 30 看似直观，但它按图片原始像素计算：一张 300×300 的图切 30px 是 10%，而同一数值在 600×600 图上只剩 5%，视觉上边框就“变细”甚至消失。这不是 bug，是规范行为，但极易引发上线后因图片替换导致的布局抖动。
实操建议：
- 统一用
border-image-slice: 10%;这类带%的写法，无论原图是 200px 还是 1200px，都稳定取四边各 10% 区域 - 如果必须用像素值（比如对接设计稿标注），请确保所有边框图源尺寸一致，并在构建流程中加入图片尺寸校验
-
border-image-slice: 0是合法的，但会裁掉全部边框区域，只剩透明边框——常被误认为“失效”，其实是切片过猛
用 linear-gradient 替代图片实现真正可控的 1px 边框
当目标是高清 1px 边框（尤其适配 DPR=2/3 设备），用图片 border-image 反而增加维护成本和加载延迟。此时 linear-gradient 是更轻量、更稳定的选择，它绕过了图片缩放和切片逻辑，直接由 CSS 渲染器控制精度。
实操建议：
- 基础写法：
border: 1px solid transparent; border-image: linear-gradient(to right, #000, #000) 1;，其中1表示 slice=1，强制用原精度不拉伸 - 如需适配高 DPR，可加媒体查询：
@media (-webkit-min-device-pixel-ratio: 2) { ... border-image: repeating-linear-gradient(...) 2; }，但多数场景单层 gradient 已足够清晰 - 注意
linear-gradient作为border-image-source时，border-image-slice仍需存在，哪怕只是1或100%
box-sizing: border-box 是兜底前提，不是可选项
即使 border-image 不影响 getBoundingClientRect() 返回的尺寸，只要盒模型是默认的 content-box，任何 border-width 都会参与总宽计算，进而影响父容器流式布局。这不是 border-image 的问题，而是盒模型本身的约束。
实操建议：
- 全局重置：
* { box-sizing: border-box; }或至少作用于所有可能用border-image的组件 - 不要依赖“反正
border-image不占空间”就省略box-sizing，因为border-width本身就会撑开content-box - 若项目受限无法全局改，至少对使用
border-image的元素单独加box-sizing: border-box
实际中最容易被忽略的是：你看到的“边框没生效”，大概率是 border-width 没写，而不是 border-image 写错了；而“边框忽粗忽细”，八成是 border-image-slice 混用了像素和百分比，且图源尺寸不统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
