不能直接用，必须显式设置border: 2px solid transparent和border-image: linear-gradient() 1；border-image-slice必须为1（无单位）才能拉伸渐变，且需避免bootstrap的.btn类样式覆盖。
button用border-image实现渐变边框为什么没效果
因为Bootstrap 5的.btn默认不设border-width，而border-image必须依赖显式的border尺寸才能渲染——它只负责“贴图”，不负责“占位”。你写了border-image: linear-gradient()，但若没配border: 2px solid transparent，浏览器根本不会分配边框空间，渐变自然不可见。
- 必须写
border: 2px solid transparent（不能只写border-width） -
border-image-slice: 1是关键，不是1px也不是100%，纯数字1才表示拉伸填充整条边 - 避免和
.btn自带的border-radius冲突：圆角会让渐变边框在转角处断层，建议加overflow: hidden或改用clip-path兜底
如何避免被Bootstrap的.btn类样式覆盖
直接给<button class="btn btn-primary"></button>加border-image大概率失效，因为.btn里带!important的border-color和border-style会干扰border-image的生效逻辑。更稳妥的做法是用独立类名绕过权重竞争。
- HTML中改用
class="btn btn-primary btn-gradient-border"，不要复用.btn-primary叠加样式 - CSS中针对
.btn-gradient-border单独声明：border、border-image、border-image-slice，并加!important仅用于这两项 - 禁用可能冲突的工具类，比如删掉
border-0、rounded-pill等，或在自定义类中显式重置border-radius: 0.375rem
移动端点击时边框渐变消失怎么办
iOS Safari和部分安卓WebView在按钮:active状态下会重置border样式，导致渐变边框瞬间退成纯色或透明。这不是CSS写错了，而是系统级高亮机制覆盖了你的border-image。
- 补全
:active状态的border-image声明，且值必须和默认态完全一致 - 加
-webkit-tap-highlight-color: transparent关闭原生点击蒙层 - 慎用
outline：某些Bootstrap版本在:focus时会加outline，可能压住边框，建议统一用box-shadow替代视觉反馈
深色模式下渐变边框颜色发灰或对比度不足
渐变色值写死在CSS里（如#6a11cb, #2575fc）时，深色模式不会自动适配。用户切到深色主题后，边框可能和背景融合，甚至文字都看不清。
- 用CSS变量定义渐变色，例如
--grad-border-start: #6a11cb，并在:root和@media (prefers-color-scheme: dark)中分别赋值 - 文字颜色别依赖
.text-white，手动设color: var(--text-on-gradient, #fff)并配合contrast()函数微调 - 测试时务必打开系统深色模式+浏览器DevTools的
Rendering → Emulate CSS prefers-color-scheme，别只靠插件模拟
border-image-slice: 1这个取值——它没有单位、不能写成1px或100%，且一旦和其他border属性顺序写反（比如border-image在border之前），部分旧版Chromium内核会静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
