扩大可点击区域

困难产生原因

对于用户体验，有一个著名的相关法则，Fitts法则

• 人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数

  $T = a + b \log_2(1 + \frac D W)$

  T：所需时间；D：从起点到目标中心的距离；W：目标区域的宽度；a、b都是常数

由上述法则可知，目标越大，越容易到达，用户体验越好

不能扩大它的视觉尺寸，将其可点击区域（热区）向外扩张也是不错的。没人愿意对一个狭小的按钮点击多次

下面解决方案皆在扩大热区

border 解决方案

设置一层透明的 border 即可扩大热区

注：描边、投影都响应不了鼠标事件

.box {
		border: 10px solid transparent;
    background-clip: content-box; /* 不让背景延伸到 border 上 */
}

但如果元素需要边框呢？

可用内嵌的 box-shadow 创建边框

.box {
    border: 10px solid transparent;
    background-clip: content-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset;
}

伪元素解决方案（更优）

边框会影响布局，但伪元素不会，所以此方案更合适，只是需要消耗一层伪元素而已

.box {
    position: relative;
}
.box::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
}