css实现文字渐变色/内发光

方法一：（不可添加文字阴影）

.main {
        background: linear-gradient(180deg, red, blue);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 30px;
    }

我是利用background-clip变色的文字

效果图：

image.png

方法二：（可添加文字阴影）

h1 {
        position: relative;
        font-size: 30px;
        color: palevioletred;
        text-shadow: -2px 2px 2px rgba(0, 0, 0, 1);
    }

    h1[data-content]:after {
        position: absolute;
        content: attr(data-content);
        text-decoration: none;
        top: 0;
        left: 0;
        z-index: 2;
        color: yellow;
        /* -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); */
        -webkit-mask-image: linear-gradient(180deg, yellow 50%, transparent);
        -webkit-mask-size: 100% 100%;
    }

我是利用mask-image变色的文字

效果图：

image.png

方法三：（可添加文字阴影）

.gradient-text-three {
        fill: url(#SVGID_1_);
        font-size: 16px;
        font-weight: bolder;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
    }

效果图：

image.png

案列：

    
        
        
        
    

    
        
好奇心
        
好奇心
    

效果图：

image.png