CSS3中的background-clip屬性，其主要是用來確定背景的裁剪區域，換句話說，就是如何控制元素背景顯示區域。
語法如下：
background-clip ： border-box || padding-box || content-box
取值說明：
● border-box:此值為預設值，背景從border區域向外裁剪，也就是超出部分將被裁剪掉；
● padding-box：背景從padding區域向外裁剪，超過padding區域的背景將被裁剪掉；
● context-box：背景從content區域向外裁剪，超過context區域的背景將被裁剪掉；
使用background-clip屬性結合border的transparent實現增大點選熱區，程式碼如下：
html程式碼:

<div>Btn</div>

css程式碼：

div{
      width:140px;line-height:48px;
      text-align:center;
      margin:50px auto;
      color:#333;
      cursor:pointer;
      background:hsl(200, 60%, 60%);
      border:20px solid transparent;
      background-clip: border-box;
    }
    div:hover{
      background:hsl(200, 60%, 50%);
      background-clip: padding-box;
    }
    div:active{
      background:hsl(200, 60%, 70%);
      background-clip: padding-box;
    }
 

試著將游標靠近 Btn，會發現在還未到達有顏色區域之前，就已經觸發了滑鼠的互動響應事件 hover，利用這一點在移動端可以很好的擴大按鈕的可點選區域又不至於改變按鈕本身的形狀。