Css 带边框半径和渐变文字的渐变边框

我正在努力实现下面的设计！我已经尝试使用渐变边框实现边框半径，但是如果我尝试使用

-webkit background clip

&

-webkit text fill color

作为渐变文本，则边框半径不起作用，整个按钮都会获得渐变色。 我使用作为参考梯度文本和附加的梯度边界代码

.btn{
背景图像：线性渐变（向右，#006175 0%，#00a950 100%）；
边界半径：40px；
框大小：边框框；
颜色：#00a84f；
显示：块；
字体：1.125rem'Oswald'，Arial，无衬线；
/*18*/
高度：80px；
字母间距：1px；
保证金：0自动；
填充：4px；
位置：相对位置；
文字装饰：无；
文本转换：大写；
宽度：264px；
z指数：2；
}
.btn:悬停{
颜色：#fff；
}
.btn跨度{
对齐项目：居中；
背景：#e7e8e9；
边界半径：40px；
显示器：flex；
证明内容：中心；
身高：100%；
过渡：背景。5s轻松；
宽度：100%；
}
.btn：悬停跨度{
背景：透明；
}

<>代码> <代码> > p>我将考虑使用伪元素构建圆形渐变，以便可以在主元素上使用<代码>背景剪辑：文本< /代码>。我已经使用了面具版本，你也可以考虑SVG之一：

.btn{
--r:40px；/*半径*/
--b:5px；/*边框宽度*/
背景：线性梯度（向右，#006175 0%，#00a950 100%）；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
颜色：透明；
边界半径：var（--r）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体：1.5rem'Oswald'，Arial，无衬线；
高度：80px；
保证金：0自动；
位置：相对位置；
z指数：0；
文字装饰：无；
宽度：264px；
}
/*检查划线问题以了解以下代码的详细信息*/
.btn：：之前{
内容：“；
位置：绝对位置；
z指数：-1；
排名：0；
左：0；
右：0；
底部：0；
边界半径：var（--r）；
边框：var（--b）实心透明；
边界半径：var（--r）；
背景：继承；
背景来源：边框框；
背景剪辑：边框框；
-网络工具包掩码：
线性渐变（#fff 0）填充框，
线性梯度（#fff 0）；
-webkit掩码复合：目标输出；
面具组合：排除；
-webkit掩码重复：无重复；
}
/**/
.btn:悬停{
颜色：#fff；
-webkit文本填充颜色：#fff；
-webkit背景剪辑：边框框；
背景剪辑：边框框；
}
.btn:悬停：：之前{
-网络工具包掩码：无；
}
身体{
背景：粉红色；
}