css - 带有边框半径和渐变文本的渐变边框

Question

我正在努力实现以下设计!我已经设法用渐变边框实现了边框半径，但是如果我尝试使用 -webkit-background-clip & -webkit-text-fill-color 渐变文本然后边框半径不起作用，整个按钮都获得了渐变颜色。我正在使用 this作为渐变文本的引用并附上渐变边框的代码

.btn {
  background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
  border-radius: 40px;
  box-sizing: border-box;
  color: #00a84f;
  display: block;
  font: 1.125rem 'Oswald', Arial, sans-serif;
  /*18*/
  height: 80px;
  letter-spacing: 1px;
  margin: 0 auto;
  padding: 4px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 264px;
  z-index: 2;
}

.btn:hover {
  color: #fff;
}

.btn span {
  align-items: center;
  background: #e7e8e9;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: background .5s ease;
  width: 100%;
}

.btn:hover span {
  background: transparent;
}

<a class="btn" href="#">
  <span>Click Here!</span>
</a>

如有任何帮助，我们将不胜感激!请随时提出一些建议。时间差

Answer 1

我会考虑this previous answer使用伪元素构建圆形渐变，以便您可以在主元素上使用 background-clip:text。我用过掩码版本，你也可以考虑 SVG 版本:

.btn {
  --r:40px; /* radius */
  --b:5px; /* border width */
  
  background: linear-gradient(to right, #006175 0%, #00a950 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 1.5rem 'Oswald', Arial, sans-serif;
  height: 80px;
  margin: 0 auto;
  position: relative;
  z-index:0;
  text-decoration: none;
  width: 264px;
}
/* check lined question for the detail of the below code */
.btn::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset: 0;
  border: var(--b) solid transparent;
  border-radius: var(--r);
  background: inherit;
  background-origin: border-box;
  background-clip: border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
}
/**/
.btn:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.btn:hover::before {
  -webkit-mask:none;
}

body {
  background:pink;
}

<a class="btn" href="#">
  Click Here!
</a>