css字渐变加投影 |css概念及作用 css3

.text {
background: linear-gradient(to right, #ff416c, #ff4b2b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 2px 6px rgba(255, 75, 43, 0.6);
}

以上代码中，大家先定义一个文本样式类“text”，并在其中设置了渐变背景，但这里特别注意，大家还需使用“-webkit-background-clip: text;”让背景填充到文字轮廓内，同时设置文字颜色为透明的状态“-webkit-text-fill-color: transparent;”。现在，可以发现大家的文字已经出现了渐变效果。

接下来，大家再加上文字投影，代码如下：

.text {
background: linear-gradient(to right, #ff416c, #ff4b2b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 2px 6px rgba(255, 75, 43, 0.6);
}

以上代码中“text-shadow”属性值的含义如下：

• X轴偏移量：0像素
• Y轴偏移量：2像素
• 模糊程度：6像素
• 颜色：rgba(255, 75, 43, 0.6)（红、绿、蓝值为255、75、43，半透明度为0.6）

有了这个属性，大家的文字就能出现投影效果了。

这就是CSS字渐变加投影的基本实现方法。你可以根据自己的喜好来调整渐变方向、背景颜色、投影偏移量等等，让你的文本效果更加出彩。