根本原因是border-width为0或未设置，需显式设为非零值（如4px）且颜色用transparent；border-image-slice=1按像素切边，100%则等比拉伸渐变图。
border-image 配合 linear-gradient 为什么边框没显示？
根本原因通常是 border-width 为 0 或未显式设置，border-image 不会自动 fallback 到普通边框样式。css 规范里明确要求：没有 border 宽度，border-image 就不渲染。
- 必须先设
border: 4px solid transparent（宽度不能是 0，颜色建议用transparent） -
border-image的切片值（如1）默认按像素理解，若边框太细（比如1px），切片会失效，推荐从4px起步 - 渐变本身没问题，但写法要对：
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1—— 注意末尾的1是border-image-slice值，不是单位
如何让渐变边框真正“立体”？关键在阴影与方向叠加
纯 linear-gradient 边框只是色带，立体感来自明暗过渡和视觉深度。真正的做法是用两个方向相反的渐变叠加一层 box-shadow 模拟高光/阴影。
- 主边框用
linear-gradient(135deg, #e0e0e0, #9e9e9e)模拟左上亮、右下暗 - 再加一层
box-shadow: inset 0 2px 4px rgba(255,255,255,0.3)模拟顶部高光 - 避免用
radial-gradient做边框——它在border-image中支持差，chrome 会锯齿，firefox 可能完全不渲染
border-image-slice = 1 和 = 100% 有什么区别？
这是最容易混淆的点。border-image-slice 数值决定渐变图像怎么“切”进四条边，但它的单位逻辑很特殊。
-
1表示“切 1 像素宽的边”，适用于纯色或简单渐变，适合细边框（如2px） -
100%表示“把整个渐变图等比拉伸到边框区域”，适合需要完整色彩流动效果（比如彩虹流），但会丢失边缘细节 - 如果用了
fill关键字（如border-image: linear-gradient(...) 1 fill），内容区也会被渐变填充——这通常不是你想要的，慎用
兼容性与性能要注意什么？
主流浏览器都支持 border-image + linear-gradient，但 safari 15.4 之前对 border-image-slice 的百分比解析有 bug，且所有浏览器在 border-width
立即学习“前端免费学习笔记（深入）”；
- 移动端 webview（尤其 android 4.4–6.0）可能完全忽略
border-image，务必加降级：border: 2px solid #ccc - 动画
border-image属于非合成属性，频繁变化会触发重排，别用@keyframes动渐变方向 - 真正省事又立体的做法：用
outline+Filter: blur()模拟发光边框，虽然不算“标准渐变边框”，但兼容性和性能好太多
复杂点在于：border-image 的切片逻辑和渲染时机是独立于普通边框的，调试时看不到中间态，只能靠删减参数逐项验证。很多人卡在第一步——忘了设 border-width。