纯CSS实现圆角按钮局部渐变边框效果及多元素复用方案

你之前实现失败的核心原因是border-image属性天生不支持与border-radius共同生效，因此无法实现圆角元素的局部渐变边框效果。该效果可以通过纯CSS实现，以下是可复用的通用类方案：

实现代码 #

CSS代码 #

/* 通用渐变毛玻璃边框类 */
.frosted-gradient-border {
  position: relative;
  /* 边框宽度可按需调整 */
  --border-width: 1px;
  /* 默认渐变方向，对应原设计右上角渐变 */
  --border-gradient: linear-gradient(257.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);
}

/* 渐变边框反向开关类 */
.frosted-gradient-border.reverse {
  --border-gradient: linear-gradient(77.34deg, #FFFFFF 4.56%, rgba(255, 255, 255, 0) 29.19%);
}

.frosted-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width);
  background: var(--border-gradient);
  /* 仅保留边框区域显示渐变 */
  -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;
  mask-composite: exclude;
  pointer-events: none;
}

/* 原有按钮样式，仅做微调适配通用类 */
button.rounded-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.125rem 2rem;
    
    position: absolute;
    width: 13.5919rem;
    height: 4.375rem;
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.7942rem);

    border-radius: 5.8652rem;
    /* 移除原有border相关代码，用通用类实现边框 */
    border: none;
    
    font-size: 1.25rem;
    line-height: 2.125rem;
    color: #fff;
}

body {
    background: #393939;
}

HTML代码 #

<!-- 原效果按钮 -->
<button type="button" class="rounded-button frosted-gradient-border">
  Watch video
  <!-- <img src="/assets/img/glyphs/ic-play.svg" alt="Watch video"> -->
</button>

<!-- 反向渐变效果按钮，添加reverse类即可 -->
<button type="button" class="rounded-button frosted-gradient-border reverse">
  Watch video
</button>

方案说明 #

• 完全基于纯CSS实现，无外部资源依赖，支持任意设置了border-radius的元素使用，只需添加.frosted-gradient-border类即可
• 通过CSS变量控制边框宽度、渐变样式，修改成本极低
• 提供reverse类作为反向开关，添加后即可切换渐变方向
• 伪元素设置了pointer-events: none，不会影响原元素的点击、hover等交互行为

内容的提问来源于stack exchange，提问作者Justin Erswell