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

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

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

<h2 class="main">我是利用background-clip变色的文字</h2>

效果图：

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%;
    }

<h1 data-content="我是利用mask-image变色的文字">我是利用mask-image变色的文字</h1>

效果图：

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);
    }

<svg viewBoxs="0 0 500 300" class="svgBox">
        <defs>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                <stop offset="0" style="stop-color:#fd8403" />
                <stop offset="0.5" style="stop-color:#fd8403" />
                <stop offset="1" style="stop-color:green" />
            </linearGradient>
        </defs>
        <text text-anchor="start" class="gradient-text-three" x="110px" y="30%">我是利用svg变色的文字</text>
    </svg>

效果图：

image.png

案列：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            .text {
                font: 100px '微软雅黑';
                font-weight: bold;
                text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);
                /* 发光色 */
                color: #c60df0;
                position: relative;
            }
            .text:before {
                content: '好奇心';
                /* 控制文字中间颜色 */
                text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
                position: absolute;
                left: 0px;
                color: rgba(0, 0, 0, 0);
            }

            .text2 {
                font: 100px '微软雅黑';
                font-weight: bold;
                position: relative;
                text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);
                color: #c60df0;
            }
            .text2:after {
                position: absolute;
                left: 0px;
                content: '好奇心';
                color: #ea0000;
                -webkit-mask-image: -webkit-gradient(
                    linear,
                    0 0,
                    0 100%,
                    from(rgba(0, 0, 0, 0.9)),
                    color-stop(40%, rgba(0, 0, 0, 0.5)),
                    to(rgba(0, 0, 0, 0))
                );
                text-shadow: 0px 0px 2px rgba(234, 0, 0, 1);
            }
        </style>
    </head>

    <body>
        <div class="text">好奇心</div>
        <div class="text2">好奇心</div>
    </body>
</html>

效果图：

image.png