Page 179 - css揭秘

试探它的热区到底有多大范围。
扩张热区最简单的办法是为它设置一圈透明边框，因为鼠标对元素边
框的交互也会触发鼠标事件，这一点是描边和投影所不及的。就这个例子而
言，把元素的热区在四个方向上各向外扩大 10px 其实很容易做到：
图 6-5
border: 10px solid transparent;
糟糕！用 border 来扩张热区也
会让我们的按钮跟着变大
在图 6-5 中可以看到，效果并不好，因为它同时让按钮变大了！原因在
于背景在默认情况下会蔓延到边框的下层。简单好用的 background-clip
属性可以把背景限制在原本的区域之内：

border: 10px solid transparent;
background-clip: padding-box;
图 6-6
用了 background-clip 之后，按 在图 6-6 中可以看到，这个方法很管用。不过好景不长，当你需要给
钮的尺寸又回归正常了
按钮加上真正的边框效果时，会发现按钮仅有的那道边框已经被我们挪作
他用了。怎么办？很简单，可以用内嵌投影来模拟出一道（实色）边框
（参见图 6-7）：

border: 10px solid transparent;
图 6-7 box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;
使用一层内嵌 box-shadow 来模
拟出边框效果
试一试 play.csssecrets.io/hit-area-border

与边框不同的是，box-shadow 可以同时指定多层投影。因此，如果你真
的需要多层投影，只要指定多个由逗号分隔的投影即可。但如果把内嵌投影和
（常规的）外部投影组合起来，将会得到一个怪异的效果，因为外部投影是绘
制在 border box 外部的。比如，我们可能想给这个按钮再加一道真实的模糊化
投影，来营造一种“浮出表面”的效果（这也是一种暗示可点击的自释性）：

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

不过，一旦真的这样去做，就会发现结果跟我们的期望大相径庭（参见
图 6-8）。这个解决方案在其他方面也不够完美：边框会影响布局，而且在某些
场景下我们可能根本无法利用边框。那该怎么改进呢？我们放弃边框，然后改
用另外一个特性来实现：伪元素同样可以代表其宿主元素来响应鼠标交互。

图 6-8 我们可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向
如果再给按钮加一道真实的投影 上都比宿主元素大出 10px：
效果，这个方法的局限就显露出
来了 button {
position: relative;

148 第 6 章 用户体验

඀ࠡ JOEC