关于设置背景颜色影响的范围

笔试的时候遇到的一道题,题目是这样的

 红色区域的宽度是多大?()//答案是80px

<div>文本</div>

div{

box-sizing:border-box;

width:100px;

padding:10px;

background-color:red;

background-clicp:content-box;

}

如果没有box-sizing:border-box和background-clicp:content-box;这两个属性的情况下,红色区域的宽度是120px;

但是添加了box-sizing:border-box和background-clicp:content-box; box-sizing我清楚,但是backgound-clicp我不清楚

我查了一下,这个是css3的属性,作用是规定背景绘制区域,有三个值:

1:border-box:背景被裁剪到边框盒。

2:padding-box:背景被裁剪到内边距框。

3:content-box:背景被裁剪到内容框。

所以红色区域会是80px