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</>

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{ padding-box;
    }
    div:active{ padding-box;
    }

试着将光标靠近 Btn,会发现在还未到达有颜色区域之前,就已经触发了鼠标的交互响应事件 hover,利用这一点在移动端可以很好的扩大按钮的可点击区域又不至于改变按钮本身的形状。

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

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码