好久没写样式，前2天有个新来的同事问我background-clip这个css3 的属性，我当时只记这个是裁剪，具体怎么裁剪已经忘记了，找了下资料整理下方便以后记忆,它有三个属性：
1.border-box
一.background-clip
这个看上去有点像box-sizing的属性，其实不是，border-box是默认值，大概意思是背景延伸到border的外边缘。看下面代码
<style>
.test{
width: 300px;
height: 300px;
border: 10px dotted #aaa;
background-color: yellow;
margin:100px auto;
padding: 20px;
background-clip:border-box;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
效果如下（背景延伸到border的外边缘）：
二.background-origin
<style>
.test {
width: 300px;
height: 300px;
padding: 20px;
border: 10px dotted #aaa;
margin: 100px auto;
background-repeat:no-repeat;
background-image: url('1.png');
background-origin: padding-box;
background-size: cover;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
背景图是以border为起点
效果是一样的，都是在border外边缘显示
2.content-box
一.background-clip
box-sizing也有这个属性，背景剪切到内容区域，上面代码内容区域是300X300,所以300之外的区域都被剪切了。
效果如下：
二.background-origin
<style>
.test {
width: 300px;
height: 300px;
padding: 20px;
border: 10px dotted #aaa;
margin: 100px auto;
background-repeat:no-repeat;
background-image: url('1.png');
background-origin: padding-box;
background-size: cover;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
背景是以content内容为起点
3.padding-box
一.background-clip
顾名思义就是在还包括padding区域，不包括border,所以是content-box+padding。
效果如下：
二.background-origin
背景图以padding为起点，不包括border
<style>
.test {
width: 300px;
height: 300px;
padding: 20px;
border: 10px dotted #aaa;
margin: 100px auto;
background-repeat:no-repeat;
background-image: url('1.png');
background-origin: padding-box;
background-size: cover;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</body>
这个两个属性是css3的属性，浏览器兼容范围 chrome15+、IE9+、Edge12+、Firefox4+、Opera11.5+、Safari7+。