今天总结一下background-clip的用法，这个属性很重要，但是不常用。要理解明白background-clip的四个属性值，首先要明白css2中的盒子模型相关知识，这里指的是现代浏览器的盒子模型，ie怪异模式请关闭当前网站，啥年代了还ie5/6呢？



浅谈css盒子模型和background-clip的用法_css


对于HTML5标签出现之前来说，很多老程序员都喜欢网站代码除了table就是是div，这也是对盒子模型的应用，可以这样说，html的所有标签都具备盒子模型，不信你就通过审查元素一个个点选看看，这些p/span/ul/table...是否带有自己的盒子模型。考虑一个问题：前端开发写页面用一个div都可以实现，为什么html5又定义那么多新标签？

答案：HTML5标签又称语义化标签，就是为了提高h5页面可读性，以及代码的美观度，降低新手学习门槛，这样当你看到nav知道这里是个导航，aside就是不太重要的模块内容...

说了那么多，盒子模型到底是什么，总结来说：所有的html标签元素都具备盒子模型，都有自己的margin-外边距区域/border-边框，描边区域/padding-内填充区域/content正文区域，如下图-body的四个区域：

css的盒子模型，说起来可能不明白，当你打开浏览器，按F12的时候，看body的属性，就看到有一个不同颜色的盒子模型存在了，默认的显示body的盒子模型。



浅谈css盒子模型和background-clip的用法_html5_02


关于盒子模型的四个属性这里就不啰嗦了，接下来步入正题background-clip的用法(个人理解)：

background-clip：用来指定元素背景所在的区域从哪个地方开始渲染，默认值是border-box

css 公式：background-clip：border-box|padding-box|content-box|text

  1. 1.border-box 默认值，背景元素从“边框”开始渲染，这时边框在背景上层。
  2. 2.padding-box 背景元素从“内填充”区域开始渲染，不会溢出到border区域内；
  3. 3.content-box 背景元素从“内容”区域开始渲染，不会溢出到border和padding区域内；
  4. 4.text 背景元素只对文字生效，相当于ps里面的剪切蒙版了，这里的话背景元素会叠加到文字上，文字以外的地方不显示。

体验代码： 

<style type="text/css">
.box{width: 200px;height: 200px;margin-bottom: 20px;background: blue;background-image: url(../img/4.jpg);padding:20px;border: 10px solid rgba(0,0,0,.3);}
.bb{background-clip: border-box;}
.pb{background-clip: padding-box;}
.cb{background-clip: content-box;}
.bt{background-clip: text;-webkit-background-clip: text;color: transparent;}
.t{font: 50px/200px "微软雅黑";font-weight: 600;}
</style>
<div class="box bb">  </div>
<div class="box pb">  </div>
<div class="box cb">  </div>
<div class="box bt t">51QUX</div>

效果图：



浅谈css盒子模型和background-clip的用法_html5_03


注意：background-clip：text的兼容性不太好，需要谷歌需要-webkit-background-clip，同时文字颜色必须是透明，才能显示下面的背景，就像玻璃栈道一样，透明玻璃才能看到下面的风景！

整体兼容性还可以，可以放心大胆使用：



浅谈css盒子模型和background-clip的用法_css_04