如何使用CSS3为按钮创建切割边框渐变效果

根据需求和参考效果，这里给出两种可行的实现方案，解决当前代码的问题：

方案一：修正border-image实现渐变边框 #

如果不需要严格兼容圆角显示（部分浏览器中border-image与border-radius组合时圆角不生效），可以调整渐变方向和参数：

<button class="button-demo">Call to action</button>

.button-demo{
    padding: 20px;
    border: 5px solid;
    border-radius: 15px;
    /* 对角线性渐变，匹配参考图的蓝橙配色 */
    border-image: linear-gradient(135deg, #00a7e1 50%, #f6531d 50%) 1;
    background: transparent;
}

方案二：伪元素+Mask实现带圆角的渐变边框（推荐） #

由于border-image和border-radius存在兼容性问题，用伪元素结合mask可以完美实现带圆角的渐变边框，兼容性更稳定：

<button class="button-demo">Call to action</button>

.button-demo{
    padding: 20px;
    border-radius: 15px;
    background: transparent;
    position: relative;
    border: none;
    z-index: 1;
    /* 可选：添加文字样式优化视觉 */
    font-size: 16px;
    font-weight: 600;
}

.button-demo::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 5px; /* 控制边框厚度 */
    /* 渐变颜色匹配参考图 */
    background: linear-gradient(135deg, #00a7e1, #f6531d);
    /* 通过mask实现边框效果 */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
}

方案说明 #

• 方案一代码简洁，但Chrome等浏览器中border-image会忽略border-radius，无法显示圆角；
• 方案二通过伪元素生成渐变背景，再用mask抠出中间内容区域，既能保留渐变边框，又完美支持圆角，是更可靠的实现方式。

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