border-image在ios safari（尤其15及更早）不生效，因webkit不支持渐变作为border-image-source；推荐用background-clip: padding-box配合padding模拟渐变边框，或clip-path裁切背景，backdrop-filter仅ios 15.4+支持内发光效果。
border-image 在 iOS 上不生效的常见原因
直接写 border-image 在 Safari（尤其是 iOS 15 及更早）上大概率没反应，不是你写错了，是它压根不支持渐变作为 border-image-source —— CSS 规范允许，但 WebKit 实现长期留空。连 border-image: linear-gradient(...) 这种写法都会被静默忽略。
- 必须用
border-image-slice: 1（不能省略，iOS 下默认值 100% 会裁掉整个渐变） - 边框宽度得显式设，比如
border: 2px solid transparent，否则border-image无处附着 - 渐变要转成 base64 或外链图片才真正兼容，但这就失去动态优势了
用 background-clip + padding 模拟渐变边框更靠谱
这是目前移动端最稳的方案：把渐变画在背景上，再用 background-clip: padding-box 把它“抠”到边框区域显示。本质是视觉欺骗，但效果一致、无兼容问题。
- 元素必须有
padding（至少 1px），不然padding-box和border-box重叠，看不到边框效果 -
background要写成渐变 +background-clip: padding-box，同时border设为透明 - 如果内容要贴边，得额外用
margin或transform补偿 padding 占位
示例：
button {
border: 2px solid transparent;
padding: 8px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-clip: padding-box;
}
clip-path 裁切背景做「伪边框」的边界条件
当需要圆角不规则边框（比如带缺口、斜角），clip-path 配合背景渐变比 border-image 更可控，但它不是真边框 —— 无法响应 hover 边框粗细变化，也不能和 box-shadow 自然叠加。
- 必须用
background-clip: border-box，否则裁切会把内容也切掉 - 裁切路径得比元素尺寸略大，否则渐变边缘会被硬截断；常用技巧是加
scale(1.01)微调 - Android WebView 对
clip-path的 SVG 路径支持不稳定，优先用inset()或polygon()基础函数
要不要用 backdrop-filter 做内发光式边框？
如果设计稿里边框带柔光或毛玻璃感，backdrop-filter 是唯一能接近的效果，但它只对「背后内容」起作用，不能独立当边框用 —— 必须配合一层遮罩层（比如伪元素）才能实现。
- iOS 15.4+ 才开始稳定支持
backdrop-filter，旧版直接失效，需加@supports降级 - 性能敏感：开启后滚动可能掉帧，尤其在低端 Android 机上
- 别忘了设
background-color: rgba(255,255,255,0.01)给伪元素，否则滤镜无作用对象
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
