css文字添加阴影及渐变

在CSS中，我们可以使用text-shadow属性为文字添加阴影，使用linear-gradient函数为文字添加渐变颜色。

解法1：文字阴影

p {
  text-shadow: 5px 5px 5px #000000;
}

在上述代码中，我们使用text-shadow属性为p元素内的文字添加了阴影，阴影的水平偏移量为5px，垂直偏移量也为5px，模糊半径为5px，颜色为黑色。

解法2：文字渐变颜色

p {
  background: -webkit-linear-gradient(#eee, #333);
  background: linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

在上述代码中，我们使用linear-gradient函数创建了一个从#eee到#333的渐变背景，并使用background-clip属性和text-fill-color属性让这个渐变背景只应用在文字上，文字的原始颜色变成了透明。

解法3：文字阴影和渐变颜色同时使用

p {
  text-shadow: 5px 5px 5px #000000;
  background: -webkit-linear-gradient(#eee, #333);
  background: linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

在上述代码中，我们同时为p元素内的文字添加了阴影和渐变颜色。文字的阴影效果和渐变效果可以同时并存，为文字提供了更为丰富的视觉效果。