CSS扩展可点击区域

们先假设我们有如图所示的简单的一个按钮

然后我们希望它的点击面积增加10px，四个方向都是。我们已经为它应用了一些简单的样式，包括cursor: pointer，这不仅可以为鼠标交互提供一些方便，还可以帮我们测试点击区域在哪。

扩展点击区域的最简单的方法是一个透明的实线边框，因为鼠标和边框的交互也会作用在元素之上，不像outline和shadow。例如，把一个元素的点击区域在所有方向上扩展10px，代码可以简单地这样写：

border: 10px solid transparent;

但是，正如你在下图中看到的，效果不是很好，因为这让我们的按钮变大了！

原因是背景默认扩展了其下方的边框。background-clip可以帮助裁剪背景，如下：

border: 10px solid transparent; background-clip: padding-box;

如上图所示，显示没有问题。但是等你在按钮周围做一个实际的边框，你才会发现实际上你已经用了唯一的那个边框来扩展点击区域了。那怎么办呢？很简单，你可以利用内阴影模拟一个（纯色的）边框

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

效果如下图所示：

不像边框，你可以使用不止一个box-shadow，如果你需要更多，你可以使用逗号来分隔这一组阴影。但是，如果我们把内阴影和外阴影结合起来，我们会得到一个非常奇怪的效果，因为外阴影是在边框盒之外绘制的。例如，我们可能会想给按钮添加一个模糊阴影，给它一个在页面上“pop out”的效果，也就是另一种可点击的内容：

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset, 0 .1em .2em -.05em rgba(0,0,0,.5);

但是，如果我们试过了，我们看到的结果和我们期望的有很大不同。

这种解决方案因为其它原因，所以并不完美。边框会影响布局，这在某些情况下可能不是问题。所以我们该咋办呢？我们移除边框，然后利用伪元素来捕捉它们的父元素和鼠标的交互。

我们可以覆盖一个透明的伪元素在我们的按钮上边，而且它在各个方向都比我们的按钮大10px：

button { position: relative; /* [rest of styling] */ } button::before { content: ''; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; }

这也是可行的，而且只要我们不需要伪元素了，它也不会影响到任何东西。伪元素的解决方案是非常灵活的——我们可以让点击区域变成任何大小、位置，或者我们想要的形状，甚至和元素本身完全无关的内容