如何用 CSS 实现渐变边框

在现代 Web UI 中，渐变边框是一种非常流行的视觉效果。今天我们就来讲讲如何用 纯 CSS + 伪元素 来实现一个灵活的渐变边框主题，且兼容 hover 动效。

---

1️⃣ 基础 HTML 结构

假设我们有一个按钮或容器：

<div class="gradient-border">
  按钮内容
</div>

---

2️⃣ 核心 CSS 代码

.gradient-border {
  position: relative; /* 必须，伪元素 absolute 才能定位到父容器 */
  border-radius: 8px; /* 可根据需要调整圆角 */
  overflow: hidden;   /* 防止伪元素溢出内容 */

  /* 用伪元素显示边框 */
  &::before {
    content: ''; /* 伪元素必须有 content 才能显示 */
    position: absolute;
    inset: 0; /* 相当于 top:0; right:0; bottom:0; left:0 */
    border-radius: inherit; /* 继承父元素圆角 */
    padding: 1px; /* 控制边框厚度 */

    /* 渐变背景 */
    background: radial-gradient(
      83.75% 143.64% at 19.37% 35%, 
      #0d98ff 0%, 
      #0b56a2 100%
    );

    /* mask 控制内容区域透明，保留边框 */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none; /* 避免阻挡鼠标事件 */
    transition: background 0.2s ease-in-out; /* hover 动效 */
  }

  /* hover 效果示例：改变边框颜色 */
  &:hover::before {
    background: radial-gradient(
      83.75% 143.64% at 19.37% 35%, 
      #ff7a00 0%, 
      #ff3c00 100%
    );
  }
}

---

3️⃣ 关键点解析

✅ 1. position: relative + ::before

• 伪元素 ::before 通过 position: absolute 完全覆盖父元素
• inset: 0 等价于 top:0; right:0; bottom:0; left:0
• padding: 1px 控制边框厚度

✅ 2. 渐变背景 radial-gradient

• 可以指定椭圆大小和渐变中心位置
• 支持从中心到外圈的多颜色渐变
• 在本例中，渐变只显示在边框区域

✅ 3. Mask 技术实现"中间透明"

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;

• linear-gradient(#fff 0 0) content-box → 遮住 内容区域
• 第二个 mask 图层覆盖整个伪元素
• xor / exclude → 保留只在边框区域的渐变，内容区域透明
• 这样实现了 "伪元素控制边框" ，无需额外 HTML 元素

✅ 4. pointer-events: none

• 确保伪元素不会阻挡点击或 hover 事件

✅ 5. Hover 动效

• 可以直接改变伪元素的 background 渐变
• transition 平滑过渡边框颜色

---

4️⃣ 效果总结

• 中间内容区域完全透明
• 边框显示渐变色
• hover 时可以平滑切换渐变
• 完全基于伪元素，无需额外 DOM

---

5️⃣ 拓展思路

1. 自定义渐变方向或颜色 → 可以做主题切换
2. 动态边框厚度 → 调整 padding 即可
3. 兼容性 → -webkit-mask 可兼容大部分 WebKit 内核浏览器，mask-composite 对现代浏览器足够

---

💡 小结：

通过伪元素 + mask + 渐变背景，我们可以轻松实现灵活、可动画的 CSS 渐变边框主题，既不依赖 JS，也不用额外 DOM 元素，非常适合组件化 UI 开发。