对于那些较小的，难以瞄准的控件，如果不能把它的视觉尺寸直接放大，比如说一个按钮，它很小（没有人愿意对一个狭小的按钮尝试点按很多次），但是我们可以通过将它的可点击区域（热区）向外扩张来提升它的可用性。
首先，把按钮写出来：
font-size:18px;
font-family: Helvetica, Tahoma, Arial;
line-height:1em; /*使用em作为单位，即使字体变化，按钮的整体样式也会按比例跟随变化*/
color:#fff;
background:linear-gradient(135deg,#fce,#cce);
padding:.5em 1.5em;
border-radius:2em;
}
扩张热区最简单的办法是为它设置一圈透明边框，因为鼠标对元素边框的交互也会触发鼠标事件。
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 可以同时指定多层投影。因此，如果你真的需要多层投影，只要指定多个由逗号分隔的投影即可。
比如此时，我们想给这个按钮再加一道真实的模糊化的投影，来营造一种“浮出表面”的效果：
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset,
0 .1em .2em -.05em rgba(0,0,0,.5);
这就很怪异了，因为外部投影是绘制在border-box 外部的。
*所以这个时候，我们可以放弃边框，使用伪元素！因为它同样可以代表其宿主元素来响应鼠标交互。
button {
/*其他样式*/
position:relative;
box-shadow:0 0 0 1px #fff inset,
0 .1em .2em -.05em #cce;
}
button:before {
content:"";
position:absolute;
top:-10px;right:-10px;
bottom:-10px; left:-10px;
}
让伪元素在四个方向上都比宿主大出10px
只要有任何一个伪元素可供利用，这个方法就可以发挥作用，也不会干扰其他任何的效果。我们甚至可以把热区设置为任何想要的尺寸、位置或形状，甚至可以脱离元素原有的位置。
参考书籍：Lea Verou《CSS揭秘》
网友评论