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 颜色体系详解
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。