用css画一个文字渐变

方法一: mask-image

<div class="regular-title" data-text="道路运输">道路运输</div>

.regular-title {
    position: relative;
    color: #07ebf1;
}
.regular-title[data-text]::after {
    content: attr(data-text);
    color: #0070a2;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 255, 0)), color-stop(0.5, #ff0000), to(rgba(0, 0, 255, 0)));
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 255, 0)), color-stop(0.5, #ff0000), to(rgba(0, 0, 255, 0)));
    text-stroke: 1px #02b2d2;
    -webkit-text-stroke: 1px #02b2d2;
}

方法二： text-fill-color + background-clip

    <div class="background-clip">
        蔡文姬蔡文姬蔡文姬
    </div>

.background-clip {
            width: 677px;
            height: 388px;
            background: -webkit-gradient(linear, 0 0, 0 bottom, from(#07ebf1), color-stop(0.5, #0070a2), to(#07ebf1));
            font-size: 60px;
            font-weight: 600;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }