CSS 提供了丰富的属性来实现各种文字效果，从基本的字体样式到复杂的动画和渐变效果。以下是一些常见的文字效果及其实现方法：

---

1. 基本文字样式

（1）字体与字号

p {
  font-family: "Arial", sans-serif; /* 字体 */
  font-size: 16px;                 /* 字号 */
  font-weight: bold;               /* 字重（粗细） */
  font-style: italic;              /* 斜体 */
}

（2）颜色与对齐

h1 {
  color: #333;                    /* 文字颜色 */
  text-align: center;             /* 对齐方式（左、中、右） */
}

（3）行高与间距

p {
  line-height: 1.5;               /* 行高 */
  letter-spacing: 2px;            /* 字符间距 */
  word-spacing: 5px;              /* 单词间距 */
}

---

2. 文字装饰

（1）下划线、删除线

a {
  text-decoration: underline;     /* 下划线 */
}

.del {
  text-decoration: line-through;  /* 删除线 */
}

（2）文本阴影

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}

（3）文本描边

h1 {
  -webkit-text-stroke: 1px black; /* 描边宽度 颜色 */
  color: white;                   /* 文字颜色 */
}

---

3. 文字渐变效果

（1）线性渐变

h1 {
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
  -webkit-background-clip: text;  /* 背景裁剪为文字 */
  -webkit-text-fill-color: transparent; /* 文字颜色透明 */
}

（2）径向渐变

h1 {
  background: radial-gradient(circle, #ff7e5f, #feb47b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

---

4. 文字动画效果

（1）颜色变化

@keyframes colorChange {
  0% { color: red; }
  50% { color: blue; }
  100% { color: green; }
}

h1 {
  animation: colorChange 3s infinite;
}

（2）文字闪烁

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

h1 {
  animation: blink 1s infinite;
}

（3）文字滚动

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

h1 {
  white-space: nowrap;           /* 禁止换行 */
  animation: scroll 10s linear infinite;
}

---

5. 文字排版

（1）首行缩进

p {
  text-indent: 2em;              /* 首行缩进 */
}

（2）文字换行

p {
  word-wrap: break-word;         /* 长单词换行 */
  white-space: pre-wrap;         /* 保留空格和换行 */
}

（3）文字方向

p {
  direction: rtl;                /* 从右到左 */
  unicode-bidi: bidi-override;   /* 强制文字方向 */
}

---

6. 高级效果

（1）3D 文字

h1 {
  text-shadow: 
    1px 1px 0 #ccc, 
    2px 2px 0 #bbb, 
    3px 3px 0 #aaa;              /* 多层阴影实现3D效果 */
  transform: rotateX(20deg);     /* 旋转 */
}

（2）文字背景图案

h1 {
  background: url('pattern.png');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

（3）文字遮罩

h1 {
  background: url('image.jpg');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

---

7. 响应式文字

（1）视口单位

h1 {
  font-size: 5vw;                /* 字体大小随视口宽度变化 */
}

（2）媒体查询

@media (max-width: 768px) {
  h1 {
    font-size: 24px;             /* 小屏幕下固定字号 */
  }
}

---

总结

CSS 提供了丰富的文字效果工具，从简单的字体样式到复杂的动画和渐变，都可以通过几行代码实现。掌握这些技巧，可以让你的网页设计更具表现力和吸引力 🎨！