[分享]css3文字渐变加发光

CSS3文字渐变加发光是一种非常常见而又实用的文本效果，可以让文字看起来更加醒目、高级，同时也能够提高页面的视觉效果。/设置文字渐变/ .gradienttext { background: line...

CSS3文字渐变加发光是一种非常常见而又实用的文本效果，可以让文字看起来更加醒目、高级，同时也能够提高页面的视觉效果。

/*设置文字渐变*/
.gradient-text {
    background: linear-gradient(to bottom, #fc00ff, #00dbde);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

/* 设置文字发光 */
.glow{
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
    color: #333;
    font-family: Impact, sans-serif;
} 

在代码中可以注意到，设置文字渐变的代码中用到了 linear-gradient() 函数，可以根据需要设置不同的渐变方向和颜色值。同时，为了让文字背景颜色与渐变色相同，需要将 -webkit-background-clip 设置为 text，然后通过 -webkit-text-fill-color 设置文字颜色为透明。

设置文字发光的代码中，使用了 text-shadow 实现，通过设置多个阴影，实现较浓重的发光效果。可以根据需要调整阴影的大小和颜色。

最终，在 HTML 中使用相应的类，即可实现此效果：

<div class="gradient-text">Hello World</div>

<div class="glow">Hello World</div>