具有边框半径和渐变文本的渐变边框答案

【问题标题】：Gradient border with border radius and gradient text具有边框半径和渐变文本的渐变边框
【发布时间】：2020-10-19 12:26:35
【问题描述】：

我正在努力实现以下设计！我已经设法用渐变边框实现了边框半径，但是如果我尝试将-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

【问题讨论】：

标签： css linear-gradients

【解决方案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;
  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>

【讨论】：

在 safari 中不起作用，这里有什么特定于 chrome 的吗？
@Harshini 将 destination-out 替换为 xor

【解决方案2】：

我从另一个帖子中得到了这个答案，它对我有用：

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

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

【讨论】：