[分享]css3文字径向渐变

CSS3中的文字径向渐变可以为文字添加优美的渐变效果。径向渐变是从中心点向四周扩散的渐变，可以在不同的距离和角度上设定不同的颜色值。下面是一个实例： h1 { background: webkitra...

CSS3中的文字径向渐变可以为文字添加优美的渐变效果。径向渐变是从中心点向四周扩散的渐变，可以在不同的距离和角度上设定不同的颜色值。下面是一个实例：

 <style>
        h1 {
            background: -webkit-radial-gradient(50% 50%, circle, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0.7) 75%, rgba(255, 255, 255, 0.8) 82%, rgba(255, 255, 255, 1) 90%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
    <h1>Hello world!</h1> 

上面的代码中使用了radial-gradient()函数来实现文字径向渐变。其中，第一个参数50% 50%表示渐变的中心点为元素的中心点，第二个参数circle表示渐变是一个圆形，后面的参数为颜色值和它们的渐变位置。在这个代码中，文字的颜色是通过-webkit-text-fill-color: transparent;属性设置为透明的，实现了渐变色填充到文字中的效果。

除了circle，还可以使用ellipse来设置椭圆形的径向渐变。同时还可以通过指定距离和角度来实现不同的渐变效果。

总体来说，文字径向渐变可以为页面增色不少，但使用应该适度，过度使用可能会影响页面的可读性。