目的: 想給一個簡單的小按鈕擴大其熱區在四個方向上均向外擴張10px
解決方案:
1. 常規的解決方案可能是設置一圈透明邊框。
border: 10px solid transparent;
2. 但是如果按鈕有背景色，那么邊框很可能會擴大按鈕的可視尺寸。於是可以采用background-clip屬性將背景限制在padding-box區域內。
background-clip: padding-box;
3. 如果此時想給按鈕添加邊框效果如陰影效果，那么只能是添加內陰影。因為外陰影會加在border-box區域外側。
box-shadow: 0 0 0 1px rgba(0,0,0, 0.3) inset;
4. 於是終極解決辦法是使用偽元素(偽元素同樣可以代表其宿主元素來響應鼠標的交互)
.button{
position: relative;
}
.button::after{
content: "";
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
}
可以將偽元素設置為任何尺寸位置或形狀甚至是脫離原來的位置
案例如下，或者參考網址 play.csssecrets.io/hit-area