border-image没效果的三大原因：一是border-width未显式设置，二是border-style为none或未声明，三是border-image-slice缺省值100%导致裁切异常；需同时满足三者才生效。
border-image 写了没效果？先查这三项
90% 的“渐变边框不显示”问题，不是浏览器不支持，而是 border-image 被整条忽略——它对基础边框样式极其敏感。必须同时满足：
-
border-width显式设置（如3px），设为0或省略，就没有渲染区域 -
border-style不能是none或未声明，默认值就是none，会直接禁用border-image；solid最稳妥 -
border-image-slice必须写，常用值是1（无单位，表示不裁切）；默认100%会把渐变切成中间一条细线，看起来像没生效
错误示例：border-image: linear-gradient(to right, red, blue); —— 没带 1，整行被忽略。
button 上用 border-image-source 的最小可行配置
按钮对交互反馈敏感，边框必须清晰、不糊、不遮文字。以下是最简且稳定能跑通的写法：
`.gradient-btn {
border: 3px solid transparent;
border-image-source: linear-gradient(90deg, #3498db, #2ecc71);
border-image-slice: 1;
}`
关键点说明：
立即学习“前端免费学习笔记（深入）”；
-
border: 3px solid transparent：必须显式写solid和宽度；transparent是降级 fallback，防止 Safari 等不支持时边框消失 - 方向建议用
90deg或to right，避免斜向渐变在上下边重复错位 - 别加
border-image-repeat——默认stretch就够用；设成repeat可能在小按钮上出现明显接缝
为什么加了 border-radius 后渐变边框“断开”了？
这不是 bug，是渲染机制决定的：border-image 先把渐变图样铺满整个矩形边框区域，再由 border-radius 对内容区做视觉裁剪——边框本身不参与圆角切割。结果常是左上角有渐变、右下角只剩纯色或空白。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
如果你需要圆角 + 渐变边框，别挣扎，直接放弃 border-image。可靠路径只有一条：background + background-clip: padding-box 模拟：
- 设
border: 2px solid transparent占位 - 设
padding: 2px（必须 ≥border-width） - 设
background: linear-gradient(45deg, red, orange) - 加
background-clip: padding-box，否则渐变会铺满整个容器
这时 border-radius 才真正作用于 padding 区域，自然连贯。
Safari 和小尺寸按钮上的兼容性坑
Chrome 110+、Firefox 115+ 支持 linear-gradient() 作为 border-image-source，但 Safari 17.4 仍不支持。更麻烦的是，iOS Safari（尤其 15.4 前）对含透明度的 rgba() 渐变有渲染 bug。
实操建议：
- Safari 下避免在渐变里写
rgba()或hsla()，改用纯十六进制色值（如#3498db） - 响应式场景中，固定像素的
border-width在缩放后易断裂；可用相对单位，如border-width: 0.2vw - 务必加降级：
border: 2px solid #666写在border-image上方，保证不支持时仍有可见边框
真正难的不是写出渐变，而是在不同尺寸、不同圆角、不同浏览器下保持边框连续不撕裂——border-image 天然不适合这些场景，工程上该换方案时就得换。
