1. 从一次样式返工说起：CSS 基础样式治理到底在治什么
如果你写过电商详情页、后台表单或者内容列表，大概率遇到过这几类“小问题”：图片和文字怎么都对不齐、输入框一点击就冒出蓝色描边、textarea 被用户拖大后整个布局错位、标题太长直接撑破卡片。它们单独看都不难，但散落在几十个页面里反复出现，就会变成持续的返工成本。
这篇聚焦的就是这类 CSS 基础样式治理：用 border 技巧画三角、用 vertical-align 对齐图文、用 cursor 和 outline/resize 处理交互细节、用 text-overflow 做溢出省略号，最后给出一份可以直接复制的 CSS 初始化骨架，并配上逐项验证动作。适合刚接触 CSS 布局的同学，也适合想把项目基础样式统一起来的前端。核心检索词就是 CSS、vertical-align、cursor、textarea、CSS 初始化。
我试过把这些零散技巧整理成一个base.css，新项目直接引入，后面调样式的时间明显少了。下面按“问题—配置—验证”的顺序展开，每一段都能单独拿去用。
2. 前置准备：把验证环境搭起来
2.1 最小验证页面结构
不需要复杂工程，一个 HTML 文件加一个 CSS 文件就够。建议目录长这样：
css-base-demo/ ├── index.html └── css/ ├── base.css # 初始化骨架 └── demo.css # 本篇各技巧的演示样式index.html里按顺序引入，注意base.css在前，保证初始化先生效：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 基础样式治理演示</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/demo.css"> </head> <body> <!-- 各节演示内容 --> </body> </html>2.2 为什么初始化要放在最前面
浏览器对h1、p、ul、body都有默认样式，而且不同内核的默认值不完全一致。初始化文件的作用是先把这些差异抹平，再让业务样式在统一的地基上叠加。顺序反了，业务样式可能被初始化覆盖，排查起来很费时间。
提示：初始化只处理“全局共性”，不要往里塞具体业务组件样式，否则文件会越来越难维护。
3. 可复制配置：三角、对齐、交互与省略号
3.1 用 border 画三角
原理很简单：一个宽高都为 0 的盒子，四条边框在交界处会形成斜切，把其中三条设为透明，剩下一条就是三角形。
/* demo.css */ .triangle-up { width: 0; height: 0; border: 10px solid transparent; border-top-color: #ff6b81; } .triangle-right { width: 0; height: 0; border: 10px solid transparent; border-left-color: #409eff; }<div class="triangle-up"></div> <div class="triangle-right"></div>border-top-color决定朝上的三角，border-left-color决定朝右的三角。想调大小就改border的宽度，想调方向就换对应的border-*-color。这个技巧常用于下拉菜单箭头、气泡提示尖角。
3.2 vertical-align 对齐图文
vertical-align只对行内元素和行内块元素生效，图片、input、button都属于行内块，所以经常用它来对齐图片和文字。可选值里最常用的是middle、top、bottom、baseline。
.img-text img { width: 24px; height: 24px; vertical-align: middle; }<p class="img-text"> <img src="icon.png" alt="图标"> 这是一段和图标垂直居中的文字 </p>默认值是baseline，图片底边会和文字基线对齐，视觉上图片会偏下。改成middle后图片中线和文字中线对齐，观感更稳。如果发现设置后没反应，先确认目标元素是不是行内或行内块——给块级元素设vertical-align是无效的。
3.3 cursor 鼠标光标形状
cursor用来告诉用户“这里能干什么”，是提升交互体验的低成本手段。
.cursor-demo li { padding: 4px 0; } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .cursor-move { cursor: move; } .cursor-text { cursor: text; } .cursor-not-allowed { cursor: not-allowed; }<ul class="cursor-demo"> <li class="cursor-default">默认箭头</li> <li class="cursor-pointer">小手，表示可点击</li> <li class="cursor-move">移动，表示可拖拽</li> <li class="cursor-text">文本，表示可选中</li> <li class="cursor-not-allowed">禁止，表示不可操作</li> </ul>按钮用pointer，禁用态用not-allowed，可拖拽区域用move，这是最常见的三种搭配。
3.4 input 聚焦不改变边框颜色
浏览器默认会给聚焦的输入框加一圈outline，颜色和边框不一致时很突兀。去掉它，再用自己的border-color控制聚焦态：
.form-input { width: 240px; height: 32px; padding: 0 8px; border: 1px solid #dcdfe6; border-radius: 4px; outline: none; transition: border-color 0.2s; } .form-input:focus { border-color: #409eff; }outline: none去掉默认描边，:focus里自己定义边框色。注意不要只写outline: none却不给任何聚焦反馈，那样键盘用户会失去焦点位置提示，可访问性会变差。
3.5 textarea 禁止拖拽改变大小
textarea右下角默认可以拖拽，用户一拖就可能撑破布局。用resize控制：
.form-textarea { width: 320px; height: 96px; padding: 8px; border: 1px solid #dcdfe6; border-radius: 4px; outline: none; resize: none; /* 禁止拖拽 */ }resize可选none、both、horizontal、vertical。表单里通常用none或vertical，既保留一点调整空间又不破坏横向布局。
3.6 溢出文字省略号
单行省略号三件套：
.ellipsis { width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }多行省略号需要弹性盒配合，并且要严格控制高度：
.ellipsis-2 { width: 160px; height: 46px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }-webkit-line-clamp: 2表示最多显示两行，height要按行高算好，否则可能出现半行被截断的观感。
3.7 可复制的 CSS 初始化骨架
把上面这些共性规则收进base.css：
/* base.css —— CSS 初始化骨架 */ * { margin: 0; padding: 0; box-sizing: border-box; } em, i { font-style: normal; } li { list-style: none; } img { border: 0; vertical-align: middle; } button { cursor: pointer; } a { color: #666; text-decoration: none; } a:hover { color: #c81623; } button, input, textarea { font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif; outline: none; } textarea { resize: none; } body { -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif; color: #666; } .hide { display: none; } .clearfix::after { visibility: hidden; clear: both; display: block; content: "."; height: 0; } .clearfix { *zoom: 1; }这里把outline: none和resize: none统一放进初始化，避免每个表单组件重复写。box-sizing: border-box是我额外加的，能让 padding 和 border 算进宽度，布局更可控。
4. 验证请求与成功结果
配置写完要逐项验证，别凭感觉。下面这张表可以直接当检查清单用：
| 验证项 | 操作动作 | 预期结果 |
|---|---|---|
| 三角 | 打开页面看两个 div | 一个朝上粉色三角、一个朝右蓝色三角 |
| vertical-align | 对比middle和baseline | middle时图标与文字中线对齐 |
| cursor | 鼠标依次悬停五个 li | 光标形状依次变化 |
| input 聚焦 | 点击输入框 | 边框变蓝，无额外描边 |
| textarea | 尝试拖右下角 | 无法拖拽改变大小 |
| 单行省略 | 看.ellipsis | 超出部分显示... |
| 多行省略 | 看.ellipsis-2 | 最多两行，第二行末尾... |
验证时建议打开浏览器开发者工具的 Elements 面板，选中元素看 Computed 样式，确认outline、resize、vertical-align的实际计算值，比肉眼判断准。
5. 本篇常见错排查
5.1 三角画出来是正方形或梯形
多半是忘了把宽高设为 0，或者只设了border没设transparent。检查.triangle是否同时有width: 0; height: 0;和三条透明边框。
5.2 vertical-align 设了没效果
先确认元素是不是行内或行内块。给div这类块级元素设vertical-align不会生效。另外父元素的行高、字体大小也会影响观感，必要时配合line-height一起调。
5.3 input 聚焦还是有蓝色描边
outline: none可能被更高优先级的样式覆盖。用开发者工具看 Computed 里的outline来源，确认是哪个选择器赢了。如果是浏览器默认的:focus-visible，可以补一条:focus-visible { outline: none; }。
5.4 textarea 拖拽没被禁止
检查resize是否写在了textarea选择器上，而不是父容器。另外有些 UI 库会给textarea加自己的resize规则，需要提高选择器权重或加!important（慎用）。
5.5 多行省略号不生效
-webkit-line-clamp依赖display: -webkit-box和-webkit-box-orient: vertical，三者缺一不可。还要确认height和line-height匹配，否则会出现截断位置不对。
5.6 初始化后某些组件样式错乱
初始化里的* { margin: 0; padding: 0; }会影响所有元素，如果引入顺序在组件库之后，可能覆盖组件库的间距。把base.css放在组件库之前引入，或者缩小*选择器的范围。
6. 把基础样式沉淀成可复用资产
这套配置的价值不在单个技巧，而在于把“每次都要重新想一遍”的琐碎问题变成一次性的初始化。新项目建好后，先引入base.css，再按需在demo.css里写业务样式，三角、对齐、表单交互、省略号这些高频场景基本不用再查资料。
如果你在团队里维护多个项目，可以把base.css抽成内部包，配合构建工具统一版本。后续想验证某个样式在不同浏览器下的表现，或者让协作方快速看到效果，可以把这份配置和演示页面一起放到可访问的环境里。需要生成 API Key 做自动化校验或接入文档管理时，可以走 API Keys 页面；想直接对话验证样式方案，用模型对话；长期做编码和 Agent 协作，则适合 Coding Plan。接入细节参考接入文档，按需取用即可。
