Chrome以容器框为基准、Firefox以图像固有尺寸为基准、Safari将0%视为0px，导致border-image-slice百分比解析不一致。
Chrome/Firefox/Safari 的 border-image-slice 默认行为到底差在哪
根本问题不是“不兼容”，而是三者对 border-image-slice 中的百分比值和像素值，在图像原始尺寸未知时（比如用 border-image-source 指向 SVG 或未加载完成的 PNG），解析时机与基准不同：Chrome 以容器边界框为参考，Firefox 以图像固有尺寸为参考，Safari 则在某些版本里会把 0% 当作 0px 处理。这导致同一组 border-image-slice: 20% 30% 40% 50% 在不同内核下切出的九宫格区域偏移量不一致。
实操建议：
- 永远显式指定图像固有尺寸——给
border-image-source的图片加width和height属性（SVG 尤其要加viewBox和明确宽高） - 避免混用单位：
border-image-slice中不要写20% 30px 40% 50px，统一用像素或统一用百分比 - 对 SVG 源，优先用
border-image-slice: 20 30 40 50（无单位整数），它会被所有浏览器当作像素值处理，且不受图像加载状态影响
border-image-repeat 的 round 在 Safari 16.4+ 里为什么拉伸失真
Safari 16.4 起将 round 的 tile 计算逻辑从“先铺满再缩放”改为“按比例缩放后取整铺排”，但没同步更新边框区域的裁剪逻辑，导致横向 round 正常、纵向出现 1px 锯齿或空白。Firefox 则始终对 round 使用整数倍缩放，不插值。
实操建议：
- 不用
round做关键视觉元素的重复——改用repeat+ 预设图块宽度/高度能被边框长度整除（例如边框宽 120px，图块宽 30px） - 若必须用
round，加兜底：border-image-repeat: round round; border-image-slice: 30;后补一句border-image-width: 30px;，强制 Safari 按固定 slice 值重算 repeat 区域 - 测试时打开 Safari 的开发者工具 → Elements → 检查
border-image计算值，看border-image-outset是否意外为非零
怎么用一张图统一切出四边、又避开各内核的 slice 解析陷阱
核心是放弃让浏览器“猜”切片位置，转而用 CSS 自身能力锁定区域。关键是把图像本身做成带预留边距的“标准模板”，再用 border-image-slice 精确抠出四角+四边+中心。
实操建议：
- 设计图时固定尺寸：例如 300×300px 的 PSD，左上角 30×30 是左上角，右上角 30×30 是右上角，顶部中间 240×30 是上边，依此类推——这样所有 slice 值都可写死为像素整数
- CSS 写死切片：
border-image-slice: 30 30 30 30 fill;（fill确保中心内容显示） - 禁用自动缩放干扰：
border-image-width: 30px;必须与 slice 值一致；同时设置border-image-outset: 0;防止 Safari 把 outset 当作 slice 基准 - 验证方式：在 Chrome、Firefox、Safari 里分别检查 computed style 中
border-image-slice的解析值是否全为30 30 30 30，而非30% 30% 30% 30%
为什么 border-image 简写声明里塞 fill 会让 Firefox 忽略 repeat
Firefox 对 border-image 简写中 fill 的位置敏感：如果 fill 出现在 border-image-slice 之后、border-image-repeat 之前（如 border-image: url(...) 30 fill repeat;），它会把 repeat 当作 border-image-width 解析，直接丢弃。Chrome 和 Safari 则按规范顺序容忍乱序。
实操建议：
- 永远把
fill放最后：border-image: url(...) 30 / 1em / 0 repeat fill; - 更稳妥的做法是拆开写：
border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeat、border-image-alpha（如有）分六行，避免简写歧义 - 用 PostCSS 插件
postcss-border-image自动校验简写顺序，它会在构建时报出 Firefox 不兼容的写法
真正难的不是写对一行 border-image，而是当设计师给来一张 2000×2000 的 PNG，你得立刻判断出这张图的切片基准是按像素还是百分比、哪些浏览器会把它当 SVG 解析、以及 repeat 在当前 border-width 下是否真能整除——这些细节藏在 DevTools 的 Computed 面板最底下，不点开看一眼，永远不知道实际生效的是哪一组值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
