text-transform仅改变文本渲染外观，不修改DOM实际字符内容，搜索复制、表单提交、JS读取均使用原始大小写，无法修复输入错误或影响中文等非拉丁文字。
text-transform能做什么，不能做什么
text-transform 只改变文本的渲染外观，不修改 DOM 中的实际字符内容。这意味着：
- 搜索、复制粘贴、表单提交时仍用原始大小写
- JavaScript 读取
textContent或value不受该属性影响
- 无法用它“修复”输入框里用户打错的大小写（比如想强制邮箱小写，得靠 JS 处理）
- 对中文、日文等非拉丁文字基本无效果（个别全角/半角转换除外，但不可靠）
四个常用值的实际表现和坑点
text-transform: none：默认值，不做任何转换text-transform: uppercase：转为全大写——注意不是简单把字母变大写，而是按语言规则处理（如土耳其语的 i → İ）text-transform: lowercase：转为全小写——同理，会尊重本地化规则text-transform: capitalize：仅首字母大写，且是每个单词的首字母（空格、标点、换行符都算分隔），不是整句首字母
常见误解：
-
capitalize不等于 “句子开头大写”，它对"hello world!"生成"Hello World!"，而不是"Hello world!"
- 没有
title-case或sentence-case这样的标准值，要实现需 JS 配合
-
full-width和full-size-kana是实验性值，浏览器支持差，别在生产环境用
和 font-variant-caps 配合使用更稳妥
当需要控制小型大写字母（small caps）时，text-transform 的 lowercase 或 uppercase 会覆盖 font-variant-caps 行为，造成意外结果。
正确做法：
- 如果只要视觉上的小型大写，优先用
font-variant-caps: small-caps
- 如果需要把小写字母先转成大写、再显示为小型大写，得组合写：
text-transform: uppercase;<br>font-variant-caps: small-caps;
但要注意：不是所有字体都提供真正的小型大写字形，fallback 时可能只是缩放的大写字母，显得模糊
遇到表单输入时，别只靠 CSS
text-transform 在 <input type="text"> 上生效，但用户看到的是转换后的样式，实际输入值仍是原始大小写。
典型问题：
- 用户输入
MyEmail@EXAMPLE.COM，页面显示全小写，但后端收到的仍是大写域名 → 邮箱校验失败
- 某些系统要求用户名严格小写，仅靠
text-transform: lowercase无法保证数据一致性
必须配合：
立即学习“前端免费学习笔记（深入）”；
- 提交前用 JS 调用
value.toLowerCase()
- 或服务端做标准化处理（更可靠）
- 若需实时反馈，可用
input事件监听并修正value，同时保持光标位置合理（这点容易被忽略）
大小写转换看着简单，真正落地时最常翻车的地方，是混淆了「显示」和「数据」两个层面。尤其在表单和国际化场景下，CSS 层面的转换只是表象，背后的数据流和语言规则才是关键。
