border-image 边框未显示渐变的根本原因是未同时设置非none的border-style和大于0的border-width；必须显式声明如border: 2px solid transparent，且border-image-slice需设为1避免9宫格裁切变形。
border-image 为什么边框没显示渐变
常见现象是写了 border-image 却看不到效果，边框还是纯色——根本原因是没同时设置 border-width 和 border-style。CSS 规范要求：只有当 border-style 不是 none 或 hidden，且 border-width 大于 0 时，border-image 才会生效。
- 必须显式写
border: 2px solid transparent（或类似），不能只靠border-image带出边框 -
transparent是安全选择，避免底色干扰渐变表现 - 如果用了
border-style: none，哪怕border-image写得再对，也完全不渲染
如何用 linear-gradient 写 border-image 源
border-image 本身不接受渐变色值，但支持把 linear-gradient() 当作图像源（和 url() 同级）。关键在语法拼接和 border-image-slice 配合。
- 写法是：
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1 - 后面的数字
1是border-image-slice值，表示“不裁切”，让渐变完整铺满边框区域 - 如果省略
border-image-slice，默认是100%，会导致渐变被切成 9 宫格、四角拉伸变形 - 注意：Safari 旧版本（≤15.4）对
linear-gradient作为border-image支持不稳定，建议加-webkit-border-image兜底
border-image 的 slice 和 repeat 怎么调才不歪
边框渐变看起来断裂、错位、重复过密，基本都出在 border-image-slice 和 border-image-repeat 配置上。它们控制的是「怎么把一张图贴到四条边上」。
-
border-image-slice: 1最简单可靠；想保留圆角内边距可用border-image-slice: 1 fill -
border-image-repeat: round会让渐变自动缩放平铺，适合等宽边框；space会在重复间加空隙，容易露底色 - 避免用
repeat—— 它不做缩放，直接硬拼接，渐变色块边缘大概率对不齐 - 如果元素有
border-radius，border-image默认不跟随圆角裁剪（除非加fill），视觉上可能显得“脱节”
替代方案：伪元素 + background-clip 能否更稳
当 border-image 在某些环境（比如低版本 iOS WebView）失效，或需要精确控制圆角渐变衔接时，用 ::before 伪元素模拟边框是更兼容的路径。
- 核心是给伪元素设
background: linear-gradient(...)，再用background-clip: padding-box避免盖住内容 - 伪元素需设
z-index: -1并定位到父容器边缘，配合inset: 0和margin: -2px（按边框宽度调整）模拟真实边框位置 - 好处是完全绕过
border-image兼容性问题，且能自由加border-radius；坏处是多一层 DOM，响应式下需同步维护伪元素尺寸 - 注意：伪元素方案无法响应
outline或焦点状态变化，交互反馈要额外处理
真正麻烦的不是写法，而是 border-image-slice 默认行为和 border-style 的隐式依赖——这两个点漏掉一个，整个渐变就静音了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
