带有边界半径和渐变文本的渐变边界 [英] Gradient border with border radius and gradient text

问题描述

我正在尝试实现以下设计！我设法用渐变边框实现了边框半径，但是如果我尝试使用 -webkit-background-clip & -webkit-text-fill-color 表示渐变文本，则边框半径不起作用，整个按钮将获得渐变颜色.我使用

  .btn {背景图片:线性渐变(向右，#006175 0％，#00a950 100％)；border-radius:40px;框大小:border-box；颜色:#00a84f；显示:块；字体:1.125rem'Oswald'，Arial，无衬线；/* 18 */高度:80px；字母间距:1px；保证金:0自动;填充:4px；职位:相对文字修饰:无；文本转换:大写；宽度:264px；z索引:2；}.btn:hover {颜色:#fff;}.btn span {align-items:居中;背景:#e7e8e9;border-radius:40px;显示:flex;证明内容:中心；高度:100％;过渡:背景.5s缓解；宽度:100％;}.btn:hover span {背景:透明；}  

 < a class ="btn" href =#">< span>点击此处！</span></a>  

任何帮助将不胜感激！请随时提出一些建议.TIA

解决方案

我将考虑此先前的答案来构建使用伪元素的圆角渐变，这样您就可以在主要元素上使用 background-clip:text .我使用过遮罩版本，您也可以考虑使用SVG:

  .btn {--r:40px;/* 半径 */--b:5px;/*边框宽度*/背景:线性渐变(向右，#006175 0％，#00a950 100％)；-webkit-background-clip:文本；背景剪辑:文本；-webkit-text-fill-color:透明；颜色:透明；border-radius:var(-r);显示:flex;align-items:居中;证明内容:中心；字体:1.5rem'Oswald'，Arial，无衬线；高度:80px；保证金:0自动;职位:相对z-index:0;文字修饰:无；宽度:264px；}/*检查内联的问题以获取以下代码的详细信息*/.btn ::之前{内容:"";位置:绝对；z索引:-1；顶:0;左:0;对:0;底部:0;border-radius:var(-r);边框:var(-b)纯透明;border-radius:var(-r);背景:继承；background-origin:border-box;background-clip:border-box;-webkit-mask:线性渐变(#fff 0 0)填充框，线性渐变(#fff 0 0);-webkit-mask-composite:目标输出；面具复合:排除；-webkit-mask-repeat:no-repeat;}/**/.btn:hover {颜色:#fff;-webkit-text-fill-color:#fff;-webkit-background-clip:边框框;background-clip:边框框；}.btn:hover :: before {-webkit-mask:无;}身体 {背景:粉红色；}  

 < a class ="btn" href =#">点击这里！</a>  

I am trying to achieve the below design! I have managed to achieve the border radius with gradient border but if i try to use -webkit-background-clip & -webkit-text-fill-color for gradient text then the border radius doesn't work and the whole button gets the gradient color. I am using this as reference for gradient text and attaching the code for gradient border

.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>

Any kind of help would be greatly appreciated! Please feel free to give some suggestions. TIA

解决方案

I will consider this previous answer to build the rounded gradient using pseudo element so that you can use background-clip:text on the main element. I have used the mask version by you can also consider the SVG one:

.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>

这篇关于带有边界半径和渐变文本的渐变边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！