空心按钮需同时满足视觉无填充、边框清晰、点击区域合理：仅用background: transparent不够，须重置默认padding/border，设box-sizing: border-box，配合border-radius与伪元素::before加inset阴影模拟内凹立体感。
空心按钮不是靠 background: transparent 就能搞定的——它必须同时满足「视觉上无填充」「边框清晰可见」「点击区域合理」三个条件，否则容易变成“看不见但点得着”或“边框被背景吃掉”的尴尬效果。
用 border + background: transparent 是基础，但不够
只写 border: 2px solid #3498db; background: transparent; 看似空心，实际在深色背景上可能因抗锯齿或缩放导致边框发虚，浅色背景又容易让文字和边框对比度不足。更关键的是，button 默认有 user-agent stylesheet 的内边距和粗细不一的默认边框，不重置会干扰视觉一致性。
- 务必加上
border-radius配合圆角边框，否则直角空心按钮边缘生硬、易误触 - 显式设置
padding，避免依赖浏览器默认值（比如 Chrome 的button默认 padding 是1px 6px） - 加
box-sizing: border-box，防止边框宽度意外撑大按钮尺寸 - 慎用
outline: none—— 移除焦点框后，键盘用户将无法识别当前焦点位置
::before 伪元素模拟镂空内凹边框
纯 border 只能画“外描边”，而真正有质感的空心按钮（比如带内发光、微凹感、双层描边）需要伪元素叠加。核心思路是：主元素透明，伪元素画一个略小一圈、带 box-shadow: inset 的同形状容器。
-
::before设置content: ""、position: absolute、inset: 2px（比主按钮内缩 2px） - 给伪元素设
border-radius: calc(12px - 2px)，保持圆角同步 - 用
box-shadow: inset 0 0 8px rgba(255,255,255,0.3)模拟内凹高光，比纯 solid 边框更有立体感 - hover 时可单独动伪元素的
box-shadow强度，避免整个按钮跳动
虚线/点状空心按钮的兼容性陷阱
用 border: 2px dashed #95a5a6 做空心按钮很常见，但 Safari 在某些 zoom 级别下会把虚线渲染成断续不均的“虚实混搭”，Firefox 对 dashed 的 dash/gap 比例也不完全一致。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是用
repeating-linear-gradient作背景图模拟虚线边框，控制精度更高 - 若坚持用
dashed，建议搭配border-image或至少加border-style: dashed单独声明，避免简写被部分旧引擎解析异常 - 移动端点击区域要额外注意：
border不参与点击热区计算，确保padding足够，否则手指点在“空心”区域会失效
最常被忽略的一点：空心按钮的 color 必须和边框色协调，不能只调边框——比如白底配白色文字+浅灰边框，结果文字和边框都几乎隐形。测试时一定要关掉开发者工具的高亮，用真实设备缩放 100% 看实际效果。
