正在加载...

CSS 文本效果

你已经会对齐、装饰并加载字体。文本效果再加一层润色 — 柔和阴影、空间不够时的省略号，或拆开难缠的长串。保持轻量，文字才好读。

一小套效果工具

📊 一眼看清文本效果

工具 日常用途
text-shadow 字形后的柔和深度或光晕（偏移、模糊、颜色）
text-overflow 被裁切文字如何收尾 — 常用 ellipsis (…)
overflow + white-space 省略号需要的搭档（hidden + nowrap）
overflow-wrap 拆开长词/URL 好放进盒子
writing-mode 让文字沿另一方向排布（如纵向）

效果是调味，不是主菜。标题可以享受安静的阴影；长段落很少需要烟火。

text-shadow — 偏移、模糊、颜色

顺序通常是 水平偏移、垂直偏移、模糊半径，然后是 颜色。小数值更平静；模糊过大字母会发糊。

基础 text-shadow

css
CSS Code 
.hero-title {
color: #1a1a1a;
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

分层阴影

可用逗号列出多层阴影 — 适合柔和抬升，而不是生硬描边。

两层柔和阴影

css
CSS Code 
.card-title {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}

文字太宽时用省略号

text-overflow: ellipsis 必须配合裁切设置：通常在有限宽度的盒子上设 overflow: hidden 和 white-space: nowrap。

窄标签上的省略号

css
CSS Code 
.label {
max-width: 12rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

overflow-wrap — 驯服长词

很长的 URL 或无空格字符串会撑破窄栏。overflow-wrap: break-word（旧名 word-wrap）允许浏览器在需要时在词内断开。

断开长字符串

css
CSS Code 
.note {
max-width: 20rem;
overflow-wrap: break-word;
}

writing-mode — 纵向一瞥

writing-mode 改变行的前进方向。纵向值适合侧边标签或装饰标题 — 不适合日常段落。

纵向文字一瞥

css
CSS Code 
.side-label {
writing-mode: vertical-rl;
letter-spacing: 0.05em;
}

平静的标题习惯

短标题上的一层柔和阴影往往够用。正文别铺重光晕，省略号只用于空间真的紧张处。

轻量标题润色

css
CSS Code 
h2.section-title {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

自己动手

  1. 给标题加柔和 text-shadow（小偏移、适度模糊）。
  2. 用逗号叠一层更浅的阴影。
  3. 做省略号标签: max-width、overflow: hidden、nowrap、ellipsis。
  4. 把长 URL 放进窄盒并设 overflow-wrap: break-word。
  5. 在短侧边标签上试 writing-mode: vertical-rl — 再回到正常阅读。

常见错误

  • 长段落上多层霓虹阴影（难读）
  • 没有 overflow: hidden 和 nowrap 就写 text-overflow: ellipsis
  • overflow-wrap 就够时还用激进 word-break 拆每个词
  • 整篇文章都用纵向 writing-mode
  • 把本课与 @font-face / 网页字体加载混在一起（上一课）

小结

  • text-shadow 使用偏移、模糊和颜色 — 数值保持克制
  • 多层阴影可叠出柔和抬升
  • 省略号需要 overflow、nowrap 和宽度限制
  • overflow-wrap 帮助长词与 URL
  • writing-mode 是专用工具；日常正文保持横向

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 29 的 35
Css 教程