之前想用element ui的框架实现弧形边框和字都渐变的button,发现总是会存在问题,因此只能另辟蹊径。
弧形边框和字都渐变的button
<div class="border">
<div class="content">
全部
</div>
</div>
.border {
display: inline-block;
border-radius: 16px;
margin: 0 10px;
padding: 2px;
// 重点
background-image: linear-gradient(#3b3c45, #3b3c45),
linear-gradient(to right, #07beed, #03db4b);
background-clip: content-box, padding-box;
&:hover {
cursor: pointer;
}
.content {
padding: 0px 13px;
font-size: 12px;
// 重点
background-image: -webkit-gradient(
linear,
left top,
right top,
from(#07beed),
to(#03db4b)
);
background-image: linear-gradient(to right, #07beed, #03db4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
边框和字渐变的button
<div class="border">
<div class="content">
全部
</div>
</div>
.border {
padding-top: 28px;
display: flex;
flex-wrap: wrap;
.content {
width: 100px;
height: 36px;
margin: 30px 0 0 20px;
text-align: center;
line-height: 36px;
border: 3px solid #ddd;
background-image: linear-gradient(90deg, #07beed, #03db4b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image: linear-gradient(90deg, #07beed, #03db4b) 20 20;
}
}