ios safari 旧版不支持 linear-gradient 作 border-image，推荐用 background-clip: padding-box + 双背景方案，兼容 ios 12+；clip-path 适合不规则边框但交互受限；backdrop-filter 内发光仅 ios 15.4+ 支持。
border-image 在 iOS Safari 上为什么没反应
不是你代码写错了，是 WebKit（iOS Safari 的渲染引擎）长期不支持用 linear-gradient() 直接当 border-image-source。哪怕写成 border-image: linear-gradient(45deg, red, blue) 1，iOS 15 及更早版本也会静默忽略——连报错都不会有。
即使强行启用，还必须加 border-image-slice: 1（不能省略，默认 100% 会把整个渐变裁掉），且 border 必须显式声明宽度和透明色，比如 border: 2px solid transparent。但这些补救措施在旧版 iOS 上依然大概率失效。
- iOS 16.4+ 才开始支持
conic-gradient作为border-image，线性渐变更稳妥，但也仅限较新系统 - Android WebView 对
border-image的兼容性波动大，尤其带border-radius时容易断裂 - 渐变若转成 base64 图片虽能绕过限制，但失去动态性，无法响应主题切换或状态变化
background-clip + padding 是移动端最稳方案
把渐变画在背景上，再用 background-clip: padding-box 把它“抠”到边框区域显示，视觉上就是渐变边框——本质是透明边框 + 裁剪背景，无兼容问题，iOS 12+ 全支持。
关键点在于：元素必须有 padding（至少 1px），否则 padding-box 和 border-box 重叠，看不到边框效果；border 必须设为透明；渐变要写在 background 里，不能只靠 background-image。
- 推荐写法：
background: linear-gradient(45deg, #ff7a00, #9c4dde) border-box, linear-gradient(white, white) padding-box——双背景叠加，前者只在边框区显示，后者填满内区，避免内容区被渐变渗透 -
background-origin: border-box必须显式声明，否则某些 Android 浏览器默认从padding-box起始，导致渐变偏移 - 如果内容需贴边，得用
margin: -8px或transform: translate(-8px)补偿padding: 8px占位
clip-path 裁切适合不规则边框但有交互限制
当需要 L 形、斜角、缺口等非矩形边框时，clip-path 配合渐变背景比 border-image 更可控，但它不是真边框——无法响应 :hover 边框粗细变化，也不能和 box-shadow 自然叠加。
必须用 background-clip: border-box，否则裁切会把内容也切掉；裁切路径得比元素尺寸略大（常用 scale(1.01) 微调），否则渐变边缘会被硬截断。
- Android WebView 对 SVG 路径支持不稳定，优先用
inset()或polygon()基础函数 - 伪元素实现时，记得加
pointer-events: none，否则会拦截点击 - 父容器若有
overflow: hidden，伪元素的inset: 0可能被裁，改用top: -2px; bottom: -2px; left: -2px; right: -2px（边框宽度）并设z-index: -1
backdrop-filter 内发光只适用于 iOS 15.4+
如果设计稿要求“毛玻璃感”或柔光边框，backdrop-filter 是唯一接近的效果，但它只对「背后内容」起作用，不能独立当边框用——必须配合一层遮罩层（如伪元素）才能实现。
iOS 15.4+ 才开始稳定支持，旧版直接失效。降级必须用 @supports (backdrop-filter: blur(1px)) 包裹，否则会导致整段样式被跳过。
- 伪元素遮罩层建议用
background: rgba(255,255,255,0.1)搭配backdrop-filter: blur(4px)模拟内发光 - Android 和部分桌面端浏览器仍不支持
backdrop-filter，降级方案建议 fallback 到纯色边框或box-shadow - 性能敏感场景慎用，
backdrop-filter在低端机上可能引发重绘卡顿
background-clip 方案就能覆盖，但圆角衔接、L 形定位、内发光这些细节，恰恰是设计师最在意、也是最容易在真机上翻车的地方。别只测 Chrome 模拟器，务必在 iOS 14/15/16 实机跑一遍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
