CSS揭秘--笔记--扩大可点击区域

根据Fitts法则，可以得出:目标越大，越容易到达。因此,对于那些较小的，难以瞄准的控件来说,如果不能把他的视觉尺寸直接扩大,将其可点击区域扩大也能提高用户体验。

1 设置一层透明边框

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

2 使用伪元素
我们可以在按钮的上层覆盖一层透明的为元素，并让伪元素在4个方向上都比宿主元素大

button{position:relative;// 其他样式}button::before{content:"";position:absolete;top:-10px;left:-10px;bottom:-10px;right:-10px;}

只要有任何一个伪元素可用，这个方法就可以发挥作用，也不会干扰其他的效果，这个基于伪元素的解决方案极为灵活，我们可以把热区设置为任何大小，任何形状，任何位置。