小tips：CSS3中的background-clip属性（背景的裁剪区域）

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，利用这一点在移动端可以很好的扩大按钮的可点击区域又不至于改变按钮本身的形状。

参考地址：【CSS进阶】CSS 颜色体系详解