空心按钮需设 background-color: transparent 清除填充，border: 2px solid #3498db 设描边，color: #3498db 统一文字色，padding 保证内边距，box-sizing: border-box 防撑大，并重置 button 默认样式如 box-shadow、border-radius 和 outline。
用 border 和透明背景实现空心按钮
空心按钮本质是「无填充、有描边」，最直接的方式就是清除背景色、保留边框，并确保文字可读。关键不是加描边，而是去掉填充。
常见错误现象：只设了 border 但没改 background-color，结果按钮还是实心的；或忘了设 color，文字被默认灰底吞掉。
-
background-color: transparent必须显式声明，不能依赖浏览器默认（有些 UA 样式会带浅灰背景） -
border: 2px solid #3498db控制描边粗细、样式和颜色；虚线可用dashed，点线用dotted - 搭配
color: #3498db保证文字与边框同色系，视觉统一 - 加
padding避免文字贴边，比如padding: 10px 20px - 记得设
box-sizing: border-box，否则border会额外撑大按钮尺寸
让描边更精细：用 -webkit-text-stroke 描文字
如果目标是「文字本身带描边」而非按钮轮廓，-webkit-text-stroke 是最简洁的方案——但它只在 Chrome/Safari/新版 Edge 里可靠。
使用场景：按钮文字需要高对比描边（比如白字+黑边），且能接受 Safari/Chrome 优先的兼容策略。
-
-webkit-text-stroke: 1.5px #2c3e50设置描边宽度和颜色 -
color: transparent必须紧跟，否则描边会被文字颜色盖住 - 降级方案：用
@supports (-webkit-text-stroke: 1px #000)包裹该规则，并在外层补充text-shadow备用 - 别用
font-weight: bold叠加描边，容易让文字变糊，优先调粗描边本身
避免 button 默认样式干扰
原生 button 带 UA 样式：圆角、阴影、内边距、甚至 focus outline。不重置就容易和空心设计冲突。
容易踩的坑：加了 border 却发现边框歪斜、有阴影残留、或点击时 outline 突兀弹出。
- 清空默认：加
border: none再重新设描边，别直接覆盖 - 移除阴影：
box-shadow: none - 重置圆角：
border-radius: 0或按需设值（如4px） - 禁用 focus outline：
outline: none，但必须同步提供:focus-visible替代样式，否则可访问性受损 - 设
cursor: pointer，避免某些浏览器下 hover 无手型
响应式下描边宽度失真问题
固定像素描边（如 2px）在高清屏或缩放页面时会显得过细或过粗，尤其当按钮尺寸本身随屏幕变化时。
性能影响不大，但视觉一致性容易崩。这不是 bug，是单位选择问题。
- 用
rem或em替代px：比如border: 0.125rem solid #3498db，随根字号缩放 - 媒体查询中分段控制：
@media (min-resolution: 2dppx)下加大描边宽度 - 慎用
vw，小屏下描边可能细到看不见；ch或ex单位对描边意义不大 - SVG 按钮虽精准，但每个按钮都要内联代码，维护成本高，仅建议品牌级按钮用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
