ios safari 15.4 之前不支持 border-image 使用 linear-gradient()，会静默忽略；推荐用 background-clip: border-box + padding 模拟渐变边框，或伪元素实现 hover 动画。
直接用 border-image + linear-gradient() 在 iOS Safari（尤其是 15.4 之前）上基本无效——不是你代码写错了，是 WebKit 长期不支持渐变作为 border-image-source，会静默忽略整条声明。
为什么 border-image 在 iOS 上经常没反应
常见错误现象：Chrome 和 Android 浏览器里效果正常，一到 iPhone 就变成透明边框或纯色边框。这不是兼容性“差”，而是 Safari（直到 15.4）压根没实现该特性。即使写了 border-image: linear-gradient(...) 1，只要底层不支持 border-image-source 接收渐变，就等于没写。
-
border-image-slice: 1写了也没用——因为源头被忽略，切片无图可切 - 加
!important或改写法（比如用to right替代45deg）都不起作用 - 控制台不会报错，也不提示降级，就是“看不见”
移动端真正能用的 fallback 方案
别硬扛 border-image，改用 background-clip + padding 模拟边框，这是目前 iOS 全版本稳定生效的方案。
- 给元素设
border: 4px solid transparent占位（宽度必须显式，否则background-clip: border-box区域不存在） - 用
background: linear-gradient(...)填充整个背景 - 关键一步：
background-clip: border-box，让渐变只渲染在边框区域（含 padding + border） - 再加
padding: 4px把内容往内推，视觉上等效于“有 4px 渐变边框” - 如果需要圆角，
border-radius可直接加，不会像border-image那样被裁断
示例：
button {<br> border: 4px solid transparent;<br> background: linear-gradient(45deg, #ff6b6b, #4ecdc4);<br> background-clip: border-box;<br> padding: 4px;<br> border-radius: 8px;<br>}
伪元素方案适合 hover 动画但要小心偏移
如果必须做 hover 下的渐变边框动画（比如颜色流动、宽度变化），::before 伪元素仍是唯一可靠选择，但它对定位精度敏感。
-
::before宽高要比主元素大2 * border-width（比如主元素宽高 100px，边框 4px，则伪元素需 108px × 108px） - 必须设
position: absolute+top: -4px; left: -4px;，漏掉任一偏移，就会露白边 -
z-index: -1确保它在主元素背后，否则会遮挡文字或交互区域 - 动画只能作用于伪元素的
background-position或transform，不能直接 animateborder
真正麻烦的不是写法，而是判断场景：要不要圆角？要不要动画？目标用户里有多少还在用 iOS 15.3？这些决定了你该砍掉哪个方案——而不是先写再调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
