CSS3 之background-clip 属性

来源：互联网发布：鸡蛋慕斯洗面奶知乎编辑：程序博客网时间：2024/05/02 08:17

clip中文为裁剪的意思，为了明显展示三个属性padding-box,border-box,content-box的区别，下面的代码中加上20px的内边距。
1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

1.padding-box

div{            width: 150px;            height: 150px;            border: 20px solid rgba(0,0,0,0.2);            background-clip: padding-box;            padding: 20px;            background-image: url("../img/fengjing.jpg");        }

效果如下：
这里写图片描述

2.border-box

div{            width: 150px;            height: 150px;            border: 20px solid rgba(0,0,0,0.2);            background-clip: border-box;            padding: 20px;            background-image: url("../img/fengjing.jpg");        }

效果如下：
这里写图片描述
3.content-box

div{            width: 150px;            height: 150px;            border: 20px solid rgba(0,0,0,0.2);            background-clip: content-box;            padding: 20px;            background-image: url("../img/fengjing.jpg");        }

效果如下
这里写图片描述

0 0