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

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>

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

Answer 1

我会考虑使用伪元素构建圆角渐变，以便您可以在主元素上使用 background-clip:text。我用过mask版，你也可以考虑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;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-radius: var(--r);
  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:destination-out;
  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>

Answer 2

我从另一个 post 那里得到了这个答案，对我来说很有效：

border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;

根据我的经验，我会使用 &:after 将 &:hover 选项插入所需的悬停效果。

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

Gradient border with border radius and gradient text

css

linear-gradients