css样式: 添加渐变色圆角实线和虚线边框

1. 圆角,实线,渐变边框: 背景色为白色

.box {
    border-radius: 12px;
    border: 1px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 80%),
    linear-gradient(
    135deg,
    rgba(178, 130, 255, 1),
    rgba(255, 96, 96, 1),
    rgba(0, 122, 255, 1)
    );
}

效果图: 

2. 圆角,虚线, 渐变边框: 背景色也为渐变色, 设置虚线时切记要将边框颜色设置为白色#ffffff, 不可以为透明色

.box {
    border-radius: 12px;
    border: 2px dashed #ffffff;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(
    135deg,
    #f6fffc 0%,
    #ebf4ff 52%,
    #fff6f3 100%
    ),
    linear-gradient(
    135deg,
    rgba(178, 130, 255, 1),
    rgba(255, 96, 96, 1),
    rgba(0, 122, 255, 1)
    );
}

效果图: