一个简单的 demo：

扩张热区最简单的方法是为它设置一圈透明框，因为鼠标对元素边框的交互也会触发鼠标事件。

但是，按钮同时也变大了！原因在于背景在默认情况下会蔓延到边框的下层。

background-clip 属性可以把背景限制在原本的区域之内。

但是 hover 的时候 background-clip 并不起效（我怀疑是个 bug @2017.08.28），对于普通的按钮还好，如果是 demo 里这样的需求，非常不友好；而且这个时候如果需要添加真正的边框，就只能用 box-shadow 去模拟了。而且，只能用内嵌投影，外部投影会作用到透明的边框的外面。

我们放弃边框，然后改用另外一个特性来实现：伪元素同样可以代表其宿主元素来响应鼠标交互。神奇的伪元素！

这个方法的优点是，我们基本上可以把热区设置为任何想要的尺寸、位置或者形状，甚至可以脱离元素原有的位置！