对CSS3新增背景相关background-clip和backg

相比于之前的背景设置，CSS3新增了两个属性：
1.background-clip：对背景颜色设置时的定位扩展；
2.background-origin：对背景图片设置时的定位扩展

这两个属性都有3个值，分别为：
1.border-box，指的是从边框处开始，包括边框；
2.padding-box，指的是从padding处开始，包括padding；
3.content-box，指的是只在内容区显示

话不多说，上代码。首先来4个div

<div class="clip1">实例11111</div>
<div class="clip2">实例22222</div>
<div class="clip3">实例33333</div>
<div class="clip4">实例44444</div>

样式分别如下

 [class*=clip]{
            background-color: black;
            color: aquamarine;
            border: 10px dashed green;
            margin-top: 40px;
            padding: 10px;
            background-image: url("service_icon.png");
            background-repeat: no-repeat;
        }
        .clip1{
            background-clip: border-box;
            background-origin: border-box;
        }
        .clip2{
            background-clip: padding-box;
            background-origin: padding-box;
        }
        .clip3{
            background-clip: content-box;
            background-origin: content-box;
        }

背景颜色黑色，文字亮蓝色，绿色虚线边框，上边距和内边距都设置，背景图片不重复，显示如下 运行结果.png

运行结果可以更好的理解上面3个属性值的定义。
还有一点要注意，就是第4个div没有设置background-clip和background-origin的属性，即这样的显示就是默认状态。所以background-clip的默认值是border-box, background-origin的默认值是padding-box.