vue3+ts实现border颜色的渐变

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