border-image-slice 数值无单位时按图像原始像素计算，带%则按原图宽高百分比；fill为可选关键字，加在数值后启用中心区域渲染，不影响切片尺寸。
border-image-slice 的数值单位和默认行为怎么理解
它不接受 px 或 % 等常规单位，只认纯数字（代表像素值）或带 % 的百分比（相对于边框图像原始尺寸），且**没有单位时默认是像素**。但关键点在于：这个“像素”不是元素自身的像素，而是你指定的 border-image-source 图片的原始像素尺寸。
常见错误现象：border-image-slice: 30; 在一张 300×300 的图上切出 30px 边缘，但在 600×600 图上就只切了顶部/左侧 5% —— 因为 30/600 = 5%，浏览器按比例缩放处理了。
- 用数字时，浏览器会自动换算成相对于图片原始宽高的百分比（当图片被缩放显示时，slice 值仍按原图尺寸计算）
- 显式写
%更可控，比如border-image-slice: 25%;表示无论原图多大，都取四边各 25% 区域 - 省略单位 ≠ 省略逻辑，
border-image-slice: 0;是合法的，但会导致边框内容区被完全裁掉，边框变空白
fill 关键字到底填哪里、什么时候生效
fill 不是加在 border-image-slice 后面的独立属性，而是 border-image-slice 的一个可选关键字，必须跟在数值之后，用空格分隔，例如 border-image-slice: 30 fill;。它的作用只有一个：让边框的中间区域（即被四条 slice 线围出的“中心块”）也参与渲染——否则默认情况下，这个中心区域会被丢弃，只用四边和四角。
使用场景：你想用一张九宫格图同时填充边框和元素背景（比如按钮内凹效果、卡片阴影延伸），就必须加 fill；否则即使图里有中心内容，也看不到。
立即学习“前端免费学习笔记（深入）”；
-
fill不影响 slice 数值本身，只改变“中心是否绘制”这一布尔开关 - 加了
fill后，中心区域会拉伸填充 border-box 的内容区（注意：不是 padding-box！是 border-box 内减去四边 slice 后的剩余矩形） - 若同时设置了
background-color，fill区域会盖在背景色之上，z-order 比 background 高
border-image-slice 和 box-sizing 的关系容易被忽略
很多人调了半天 border-image-slice 没效果，最后发现是因为 box-sizing: border-box 下，border 宽度本身会影响图像如何贴合——但 border-image-slice 的裁剪逻辑**完全不关心元素的 border-width 设置值**，它只按图像自身尺寸切，然后把切出来的九块，按 border-width 分配到对应位置。
也就是说：你设了 border-width: 20px，但 border-image-slice: 30，浏览器依然会把图切成 30px 宽的边，再强行缩放到 20px 高度去贴边——结果就是模糊或错位。
- 理想匹配是：slice 值 ≈ border-width × 缩放系数（比如图是 2x 视网膜图，slice 写 40，border-width 设 20）
- 如果图是矢量（SVG），推荐用
%单位，避免像素对齐问题 -
border-image-repeat: round或space时，slice 值只决定初始切割，后续平铺逻辑由 repeat 控制，和 slice 无关
调试 border-image-slice 的实际技巧
浏览器 DevTools 不会高亮显示 slice 切线，也没法直接看到哪块被 fill 了，只能靠“排除法+视觉反馈”。最有效的做法是临时把 border-image-source 换成一张带明显网格或文字标注的测试图（比如 100×100 的图，左上标 “TL”，右上 “TR”，中间写 “CENTER”）。
- 先写死
border-width: 20px和border-style: solid，确保边框可见 - 从
border-image-slice: 25% 25% 25% 25%开始试，看四角是否对齐预期位置 - 加上
fill后，观察中间文字是否出现；没出现？检查是不是被background-clip或overflow: hidden截断了 - 遇到模糊，优先查图分辨率和 slice 数值是否匹配，而不是怀疑 CSS 写错了
真正麻烦的从来不是语法，是图和尺寸之间的隐式耦合——改一个 pixel 的 slice，可能要重切整张图的导出设置。
