CSS 解决背景显示范围的问题

1、css 解决背景显示范围的问题过去在学习css的时候，首要任务就是要理解box model，由于box model是css里头很重要的模型概念，描述了padding、margin、border与content的空间定位，今日的项目居然卡在一个容易的小问题，因此就用一篇文章做个纪录提示自己不要遗忘，也避开之后遭受到又会卡住了。（下图就是css的box model）今日碰到的问题是出在我用了一个半透亮的border，但却无法顺当地透过并显示背景的图案或色彩，后来发觉本来box预设的border，其实是在这个box之内的，虽然border在box的内部，但其实与刚刚的box model并没有相违反，

2、由于border包住的空间，仍然是padding与content，只是假如把border变成半透亮，就会把原本box的底色给展现出来。（如下图）为了让border可以顺当的在外面显示背景的图案或色彩，就需要用到box-sizing与background-clip这两个css3的属性来设定，就让我们来分离看看这两个属性该如何用法：box-sizingbox-sizing有两个值可以设定，分离是：content-box（预设值）与border-box，假如在content-box的情形下，我们设定了box的padding或border，box就会被撑开，由于padding和border是长在box

3、内的，不过假如我们将box-sizing设定为border-box，那么就会向来维持原始的大小，但相对的也就会压缩内部的空间，我自己在设计网页的习惯，都会预先把全部的div设为border-box，如此一来才干更便利去计算大小，也能避开内容的东西加了padding就把外框变大了，然后再按照当下的状况，去打算是否要改为content-box。下面的示例是用三个示例来对比参考，半透亮的蓝色方块是原始的大小，第一张图设定了padding:20px；，其次张图除了padding:20px之外，还有设定了border:10px dotted rgba（255,0,0，.5）；，第三张图则是与其次张图同样

4、的设定，但box-sizing设为border-box，经由对比，就可以很显然的发觉彼此的差异。html：css：divwidth:120px;height:120px;margin:20px 0 0 10px;padding:20px;display:inline-block;background:url(地址);div>divbackground:rgba(0,200,255,.4);margin:0;padding:0;.boxborder:10px dotted rgba(255,0,0,.5);.default/*box-sizing:content-box;*/ /*预设值*

5、/.border-boxbox-sizing:border-box;background-clip严格说起来background-clip与box-sizing应当是八竿子打不着边，但由于在设计一个box的时候，往往都会border、padding和margin混合用法，也由于这个css3的属性，让我刹那间不知道是哪里写错了，结果本来是自己忘了属性该怎么用法。background-clip共有三个设定值，分离是：border-box（预设值）、padding-box、content-box，很好玩的是，刚刚的box-sizing预设值为content-box，这里的预设值却变成了border-

6、box，下面的三张图，分离代表了这三个设定值的长相，我们可以看到，第一张图在预设值的情形下，边框之下就是原本box的底色（边框是半透亮的虚线），其次张图设为padding-box，border下方就不会有box底色，最后一个设定为content-box，就只会浮现content区域的背景，border与padding下的背景都会消逝，这也是background（背景）clip（剪裁）的意义所在。html：css：divwidth:120px;height:120px;margin:20px 0 0 10px;display:inline-block;background:url(地址);padding:20px;div>divmargin:0;padding:0;background:rgba(0,200,255,.4);.bg-border-box/* background-clip:border-box; */ /*预设值*/.bg-padding-boxbackground-clip:padding-box;.bg-content-boxbackgroun