纯线条+文字按钮需语义正确、视觉可识别：必须用button元素，border与color有足够对比度；padding≥8px 16px、line-height=height、禁用outline但用:focus-visible补焦点；加cursor:pointer和user-select:none；图标需vertical-align:middle；文字描边用text-shadow降级更稳妥；状态反馈需:hover/:active微调背景或边框。
纯线条 + 文字就能构成可用按钮，关键不在“画”，而在「语义正确」和「视觉可识别」——button 元素必须存在，border 和 color 必须有足够对比度，否则它只是个长得像按钮的 div。
用 border 模拟线条按钮，别漏掉 padding 和 line-height
只设 border: 1px solid #333 不够。没有内边距，文字会紧贴边框；没有行高控制，小字号下垂直居中会偏移；没有明确宽高，按钮在不同浏览器里收缩行为不一致。
-
padding至少设8px 16px，保证手指/光标有安全点击区域 -
line-height设为与height一致（如height: 36px; line-height: 36px;），避免文字上下错位 - 禁用默认
outline，但必须用:focus-visible补上键盘焦点样式，否则无障碍失效
button 的极简样式不能省略 cursor 和 user-select
没加 cursor: pointer，用户 hover 时不会出现手型，第一直觉就不是可点元素；没设 user-select: none，双击可能选中文字，破坏简洁感。
-
cursor: pointer是最低成本的信任信号，比加阴影或动效更基础 -
user-select: none防止误操作，尤其当按钮文字是单字（如「删」「查」）时特别明显 - 若按钮含图标（如 SVG），需额外加
vertical-align: middle对齐文字基线
文字描边在极简按钮里容易翻车，优先用 text-shadow 降级
想让文字更“线性”，有人直接上 -webkit-text-stroke。但它在 Firefox 和旧版 Edge 完全不生效，且一旦设了 color: transparent，降级后文字就消失了——你看到的是空白按钮。
- 稳妥做法：用
text-shadow: 0 0 1px #000做微弱描边，所有浏览器都渲染为模糊细边，不依赖透明色 - 真要硬控描边宽度，必须用
@supports (-webkit-text-stroke: 1px)包裹，并在里面同时声明color: #000作为 fallback - 注意字体选择：无衬线体（如
system-ui）比衬线体更适配线条感，小字号下font-weight: 500比400更稳
极简按钮最易被忽略的其实是状态反馈：:hover 和 :active 不能只改颜色，至少要加 background-color: rgba(0,0,0,0.05) 或 border-color: #000 这类微变化——线条本身不动，但用户需要确认“我点到了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
