border-image 配合 linear-gradient 需正确写法：必须用 border-image: linear-gradient(...)，设 border-width，border-image-slice: 1 fill，避免百分比和角度单位，并注意 safari≤15.6/edge≤18 不支持，圆角会导致渐变断裂。
border-image 遇到 linear-gradient 就失效？
不是失效，是写法不匹配。CSS 的 border-image 不接受直接写 linear-gradient(...) 作为值——它只认 image 类型，而渐变在 CSS 中属于 <image></image>，但必须显式包裹成函数形式，且不能带单位或错误语法。
- 正确写法必须用
border-image: linear-gradient(...)，不能漏掉border-image属性本身（仅设border不生效） - 渐变方向要明确，比如
to right比90deg更稳妥，部分旧版 Safari 对角度支持不稳定 - 必须配
border-image-slice: 1（或1 fill），否则渐变会被裁成 0×0，边框“看不见” - 别忘了先设
border-width，border-image不会自动撑出宽度
为什么 border-image-slice 设成 1 才能显示渐变？
border-image-slice 默认是 100%，它把图片按 9 块切：四角保留、四边拉伸、中间丢弃。对渐变这种无像素边界的内容，100% 会让所有“边”区域被判定为 0 宽度，结果就是没边可画。
-
border-image-slice: 1是关键：数值 1 表示“1px 切片”，强制启用九宫格，且让上下左右的边区有实际尺寸可拉伸 - 加
fill（即border-image-slice: 1 fill）才能让渐变铺满整个边框区域，否则中间空白 - 不用百分比值，避免在不同缩放/设备像素比下行为漂移
Safari 和旧 Edge 下渐变边框完全不显示？
是的，Safari ≤ 15.6 和 Edge ≤ 18 不支持 border-image: linear-gradient()，连带 radial-gradient() 也挂掉。这不是写错，是引擎没实现。
- 兼容方案只有两个：用
outline+outline-offset模拟单侧边框（但不支持圆角衔接） - 或者改用伪元素（
::before/::after）+transform: scale()覆盖绘制，控制层级和尺寸更稳 - 别试
-webkit-border-image前缀——它从没支持过渐变，只认 PNG/SVG - 可用
@supports (border-image: linear-gradient(#000, #fff))做特性检测，把降级样式包在里面
圆角（border-radius）和 border-image 渐变冲突怎么办？
冲突很真实：border-radius 会裁剪掉 border-image 的拐角，导致渐变在圆角处断裂或颜色突变，尤其当渐变方向与边框走向不一致时。
立即学习“前端免费学习笔记（深入）”；
- 优先降低
border-radius值，比如从12px改成6px，能明显缓解撕裂感 - 避免在
border-image中使用高对比度渐变（如黑→白），换成同色系深浅过渡更耐裁剪 - 如果必须大圆角，放弃
border-image，改用background: linear-gradient()+padding+background-clip: padding-box模拟“视觉边框”
真正麻烦的是 border-image-slice 和 border-radius 的组合行为没有标准定义，不同浏览器渲染细节差异藏得深，调的时候得盯着真机看。
