类似这种效果,如何实现?难点在于边框渐变实现、如何实现文字渐变且不影响背景色
<div class="tab_btn">
<div class="tab_btn_bg"></div>
<div class="tab_btn_bg2"></div>
<div class="tab_btn_inner">立即体验</div>
</div>
.tab_btn {
position: relative;
width: 168px;
height: 54px;
line-height: 54px;
font-size: 24px;
text-align: center;
overflow: hidden;
border-radius: 28px;
border: 1px solid transparent;
}
.tab_btn_bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: inherit;
background: linear-gradient(86deg, #2795F8 23.03%, #5E4BFD 85.04%);
}
.tab_btn_bg2 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: 1px;
border-radius: inherit;
background: #f5fbff;
}
.tab_btn_inner {
position: relative;
background: linear-gradient(86deg, #2795F8 23.03%, #5E4BFD 85.04%);
background-clip: text;
-webkit-background-clip: text;
color: #2049EE;
-webkit-text-fill-color: transparent;
}
原理参考这篇文章juejin.cn/post/715997…