css文字特效

/* 示例代码：CSS文字特效 */

/* 1. 文字阴影效果 */
.shadow-text {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* 解释：text-shadow 属性用于为文本添加阴影。上面的代码设置了文字颜色为白色，并为其添加了一个偏移量为 2px 的阴影，阴影的颜色是半透明的黑色。 */

/* 2. 文字渐变效果 */
.gradient-text {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 解释：通过 background 和 -webkit-background-clip:text 属性，可以创建文字渐变效果。这里使用了线性渐变从 #ff7e5f 到 #feb47b。 */

/* 3. 文字描边效果 */
.stroke-text {
  color: white;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
}

/* 解释：通过多个 text-shadow 属性，可以模拟出文字描边的效果。每个阴影的方向和颜色不同，组合起来形成描边效果。 */