渐变色文字、渐变色圆角边框

渐变色文字：

.gradient-font-color {
    display: inline-block;
    background: linear-gradient(80deg, #74D9FF 0%, #BBECFF 46%, #D3B1FF 100%);
    -webkit-background-clip: text;
    color: transparent;
}

渐变带背景色带圆角边框：

.gradient-border-box {
    --border-radius: 8px;
    --border-width: 2px;
    --border-image: linear-gradient(180deg, rgba(73, 146, 255, 0.25), rgba(255, 255, 255, 0.15));
    --bg-gradient: linear-gradient( 180deg, rgba(146,163,255, 0.15) 0%, rgba(0,15,143,0) 100%);
    appearance: none;
    position: relative;
    border: 0;
    z-index: 2;
    border-radius: var(--border-radius);
    line-height: 18px;
    background: var(--bg-gradient);
    border: var(--border-width) solid transparent;
}
.gradient-border-box::after {
    --m-o: content-box, padding-box;
    --m-i: linear-gradient(#fff, #fff);
    content: "";
    position: absolute;
    left: calc(var(--border-width) * -1);
    top: calc(var(--border-width) * -1);
    width: 100%;
    height: 100%;
    z-index:-1;
    padding: var(--border-width);
    border-radius: var(--border-radius);
    background: var(--border-image);
    -webkit-mask-image: var(--m-i), var(--m-i);
    mask-image: var(--m-i), var(--m-i);
    -webkit-mask-origin: var(--m-o);
    mask-origin: var(--m-o);
    -webkit-mask-clip: var(--m-o);
    mask-composite: exclude;
    -webkit-mask-composite: destination-out;
}

参考：滑动验证页面