透明边框能扩大点击区域，因为浏览器依据border-box尺寸判定可点击区域；加10px透明边框后border-box向外扩张，但需配合background-clip: padding-box防止背景渗入导致视觉变大。
直接用 border: 10px solid transparent 就能扩大热区，但必须配合 background-clip: padding-box，否则背景会渗入透明边框区域，导致视觉尺寸意外变大。
为什么透明边框能扩大点击区域
浏览器判定元素可点击区域（hit area）的依据是它的 border-box 尺寸，而不是 content 或 padding 区域。给按钮加 border: 10px solid transparent 后，border-box 自动向外扩张 10px，鼠标在“空隙”里也能触发 click —— 这个行为是原生支持的，无需 JS 干预。
常见错误现象：border: 10px solid transparent 加了，但热区没变大？大概率是按钮本身有背景色，且没限制背景绘制范围。
- 背景默认绘制在
border-box区域，所以会把透明边框也“染上色”，看起来像按钮胖了一圈 - 此时用户感知不到热区变大，因为视觉边界和实际点击边界不一致
- 解决方式就是强制背景只画在
padding-box内：加上background-clip: padding-box
如何避免边框干扰视觉与阴影效果
加了透明边框后，你不能再用 box-shadow 外阴影模拟边框，因为阴影会落在 border-box 外侧，也就是已经扩张过的区域之外，看起来像是“漏了一圈”。
正确做法是改用内阴影：
-
box-shadow: 0 0 0 1px rgba(0,0,0,0.3) inset—— 模拟 1px 实边，且不改变布局尺寸 - 如果需要更粗的“视觉边框”，可加大 inset 值，比如
0 0 0 2px - 注意：外阴影（非
inset）在此场景下完全失效，别白费劲
兼容性与 IE8 下的 fallback 要点
透明边框本身（solid transparent）在 IE8+ 都支持，但如果你同时用了 rgba() 配色或 background-clip，就得小心。
-
background-clip: padding-box在 IE9+ 和现代浏览器中有效，IE8 不识别，会忽略该声明——此时背景仍会溢出，但至少不会报错 - 若项目需兼容 IE8，唯一稳妥方案是换用伪元素法：
::after绝对定位撑开热区，不依赖 border 或 background-clip - 别试图用
outline或box-shadow替代边框来扩热区——它们不参与 hit testing，点了没反应
最容易被忽略的是：透明边框虽不显形，但它真实占用了 layout 空间，可能挤压相邻元素。如果按钮是 inline 元素，建议额外加 vertical-align: middle 或统一用 display: inline-flex 控制基线对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
