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;
}

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

你可能感兴趣的:(css)