CSS 渐变边框方案总结

给面板加渐变边框，我试了 5 种 CSS 方案，最后只留了这一行

最近做个面板，产品要求挺朴素但也挺刁钻：背景要渐变、边框也要渐变、还得是圆角的。这俩一叠加，「border 怎么渐变」就成了个坑。我把能用的方案都试了一遍，记下来给你省时间。

先说结论

最推荐的写法，就 5 行：

.ai-audit-panel {
  border-radius: 8px;
  border: 1px solid transparent;
  background:
    linear-gradient(62deg, #F8FAFB 0%, #F8FBFB 46.83%, #F9FBFB 100%) padding-box,
    linear-gradient(90deg, rgba(55,119,255,1), rgba(0,200,190,1)) border-box;
}

padding-box 那层是内容背景，border-box 那层是边框渐变，两层叠一起，边框区域透出渐变、内容区域显示背景。没有伪元素、不用算 z-index，改边框宽度只动 border-width。下面说说我为什么淘汰了另外 4 种。

方案一：border-image（直接放弃）

border-image: linear-gradient(90deg, #3777FF, #00C8BE) 1;
border-radius: 8px; /* ⚠️ 失效 */

一句话：border-image 和 border-radius 不兼容，圆角直接没了。需求就是要圆角，所以这方案出局。

方案二：伪元素 + mask（能用，但啰嗦）

.ai-audit-panel {
  position: relative;
  border-radius: 8px;
  background: linear-gradient(90deg, #3777FF, #00C8BE);
  &::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 8px;
    background: #F8FAFB;
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

原理是伪元素盖在渐变背景上、用 mask 把内容区挖空，只留 1px 边框。能用，但要多管 z-index，mask-composite 兼容性也一般。

方案三：伪元素模拟嵌套（也能用）

思路和上面类似，但不靠 mask，直接 inset: 1px 盖一层内容背景，靠内外 border-radius 差 1px 透出边框。兼容性比 mask 方案好，但同样要处理层级。

方案四：双层 DOM（最稳但最土）

<div class="outer"><div class="inner">内容</div></div>

.outer { border-radius: 8px; background: linear-gradient(90deg,#3777FF,#00C8BE); padding: 1px; }
.inner { border-radius: 7px; background: #F8FAFB; }

兼容性最好，问题是多了一层 DOM，纯属为了边框加节点，不优雅，不推荐。

五种方案一句话对比

方案	代码量	额外 DOM	兼容性	推荐度
border-image	少	❌	❌ 不支持圆角	弃
伪元素 + mask	中	❌	⚠️ 一般	⭐⭐
伪元素模拟 wrapper	中	❌	✅ 好	⭐⭐⭐
background-clip	少	❌	✅ 好	⭐⭐⭐⭐⭐
双层 DOM	中	✅	✅ 最好	⭐⭐

日常项目里，直接抄开头那 5 行就完事了。

---

原文链接：https://blog.fateguy.com/posts/css-gradient-border