渐变色边框的究极方案，支持圆角、边框动画、背景色透明度等等～

看了很多的渐变色边框方案，都不能完全解决我的需求，废话少说直接带来， 渐变边框的究极实现方案。

🎯 效果演示

我们要实现的效果如下：

• 渐变边框（支持多色渐变）
• 支持圆角
• 边框“镂空”，不影响背景色透明度
• 悬停时边框淡入，支持动画
• 不依赖额外标签

👇👇👇（可自行复制到项目中预览）

💡 技术原理详解

核心思路是使用 CSS 的 ::before 伪元素配合 mask 技术，实现边框区域的渐变叠加，同时挖空中间区域，使其看起来像是一个真正的“边框”。

✅ 优点：

• 不需要额外嵌套结构
• 渐变、圆角、透明度可控
• 动画流畅，易扩展

📦 核心代码实现

<style>
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .border {
    width: 200px;
    height: 100px;
    background: rgba(25, 33, 61, 0.08); /* 支持半透明背景 */
    box-sizing: border-box;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 2px 4px rgba(25, 33, 61, 0.08);
  }

  .border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px; /* 控制边框厚度 */
    box-sizing: border-box;
    background: linear-gradient(180deg, blue, red); /* 自定义渐变色 */
    background-size: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;

    /* 实现边框镂空效果的关键：使用 mask */
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;

    /* 兼容 WebKit 浏览器 */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
  }

  .border:hover::before,
  .border:focus-within::before {
    opacity: 1;
  }
</style>

<div class="border"></div>