UI想要这样的
image.png
我们就要去改el-button的样式
.el-button {
width: 68px;
height: 32px;
background: rgba(255, 255, 255, 0.9);
border-radius: 16px;
border: 1px solid; /* 需要设置该属性 */
border-image: linear-gradient(135deg, rgba(68, 216, 255, 1), rgba(124, 68, 255, 1), rgba(68, 111, 255, 1)) 1 1; /* 最重要的属性！！才能实现渐变 */
font-weight: 400;
font-size: 14px;
color: #6236FF;
line-height: 20px;
}
可是按照上面的这个css却得到了这样的效果
image.png
查了老半天才确定是border-image和border-radius有冲突，后面我就用了笨方法
::v-deep .activity {
.el-button {
width: 68px;
height: 32px;
background: linear-gradient(135deg, rgba(68, 216, 255, 1), rgba(124, 68, 255, 1), rgba(68, 111, 255, 1));
border-radius: 16px;
padding: 0 1px;
border: none;
>span {
width: 66px;
height: 30px;
display: inline-block;
background: #fff;
border-radius: 16px;
color: #6236FF;
font-weight: 400;
font-size: 14px;
line-height: 30px;
font-style: normal;
}
}
}
终于实现了效果！！！呜呜呜，就这样吧，能抓到老鼠的都是好猫
image.png
