如何用CSS复刻Figma中的圆角渐变边框按钮设计？

我尝试用CSS复刻自己在Figma中设计的一款按钮：

起初我尝试使用SVG，但响应式表现不佳。之后我尝试用conic-gradient实现渐变边框，代码如下：

.btn { 
  padding: 10px; 
  border: 4px solid transparent; 
  border-image: conic-gradient( 
    from 243deg, 
    #4129d4 0%, #4129d4 15%, 
    #fcb600 15%, #fcb600 95%, 
    transparent 95%, transparent 100% 
  ) 1 stretch;
}

<button class="btn">Connexion</button>

但目前存在两个问题：

• 渐变边框的两端无法像Figma设计那样呈现圆角；
• 按钮需要设置圆角，但添加border-radius后无法正常作用于渐变边框。

请问有没有更好的实现方案，或者如何让渐变边框同时具备圆角效果？

核心问题原因 #

border-image属性不支持border-radius，这是CSS规范中的固有限制，所以直接用它无法实现带圆角的渐变边框。下面提供两种简洁且支持响应式的方案：

方案1：双层背景+background-clip（推荐） #

利用CSS背景的分层裁剪特性，无需伪元素即可实现带圆角的渐变边框，代码简洁且兼容性好：

.btn {
  /* 基础样式 */
  padding: 10px 20px; /* 可根据需求调整内边距 */
  font-size: 16px;
  border: none;
  border-radius: 8px; /* 自定义圆角大小，匹配设计 */
  cursor: pointer;
  
  /* 关键背景设置 */
  /* 第一层：按钮内部背景色，仅在padding区域显示 */
  background: linear-gradient(#ffffff, #ffffff) padding-box;
  /* 第二层：渐变边框，覆盖整个border区域 */
  background: linear-gradient(#ffffff, #ffffff) padding-box,
    conic-gradient(
      from 243deg,
      #4129d4 0%, #4129d4 15%,
      #fcb600 15%, #fcb600 95%,
      transparent 95%, transparent 100%
    ) border-box;
}

<button class="btn">Connexion</button>

原理说明：

• padding-box：将背景裁剪到内边距盒，确保按钮内部背景只覆盖内容+padding区域；
• border-box：将渐变背景裁剪到边框盒，覆盖原本的透明边框区域，模拟出渐变边框效果；
• border-radius会同时作用于两层背景，自然实现圆角渐变边框。

方案2：伪元素+遮罩（更灵活） #

如果需要更复杂的边框动态效果，可用伪元素配合CSS遮罩实现：

.btn {
  /* 基础样式 */
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff; /* 按钮内部背景色 */
  position: relative;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left: 0 */
  border-radius: inherit; /* 继承按钮的圆角 */
  padding: 4px; /* 边框宽度 */
  background: conic-gradient(
    from 243deg,
    #4129d4 0%, #4129d4 15%,
    #fcb600 15%, #fcb600 95%,
    transparent 95%, transparent 100%
  );
  
  /* 遮罩：挖掉中间区域，只保留边框部分 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* Safari兼容 */
  mask-composite: exclude; /* 标准写法 */
  
  z-index: -1;
}

原理说明：

• 伪元素作为按钮的“底层边框层”，尺寸和按钮完全一致；
• 通过padding设置边框宽度，再用CSS遮罩将中间内容区域挖空，只留下渐变边框；
• border-radius: inherit保证伪元素圆角与按钮同步。

方案优势： #

1. 完全支持border-radius，完美匹配Figma设计的圆角效果；
2. 响应式表现良好，按钮尺寸变化时边框自动适配；
3. 纯CSS实现，无需依赖SVG，维护成本低。

内容的提问来源于stack exchange，提问作者Clément Bruant Steineur