background-clip,origin属性

background-clip是新增属性之一，其作用是确定背景的裁剪区域。

background-clip语法：

background-clip:margin-box | padding-box | concent-box;

background-clip:margin-box就是将margin以外的区域裁剪掉，其后的padding-box和concent-box分别是padding以外和concent以外区域的裁剪。比较抽象。。

主要作用也就是剪裁背景区域使图片达到视觉效果。所以通过background-clip能达到透明的边框效果，具体代码例子如：

css:

.test{

　　background:#3b5a98;

　　width:200px;

　　heigth:200px;

　　border:50px solid red;

　　border-radius:15px;

　　opacity:0.4;(默认谷歌)

　　background-clip:padding-box;

}这样做出来的效果就是透明的背景图，test的div自己可以输入文本内容。

background-origin背景图片(可以是文本)的定位远点设置属性，常用的有：background-origin:padding | concent| border；

background-clip中元素backgroun中的background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处）.

background-origin老版本的语法如上所示，新版语法在后面多加个box如background-origin:padding-box;一般防止老的浏览器不兼容问题会将新旧语法同事输入。

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；