background-clip的奇妙

     今天问了一个问题：border是算在width里面还是外面，我说是里面，然后他又接着引申了一下问题：如果border很大，而且元素有背景色，那背景色是在border里还是外面？又问，如果元素有背景图，那背景图平铺的话，会在border里面还是外面？接着问，如果背景图不平铺的话，会在border里面还是外面？我让这一连串的问题问晕了，然后就挨个试验，试验是检验真理保证嘛！

　试验结果发现好神奇，如果有背景色的话，背景色会在border外面消失；如果有背景图平铺的话，背景图会在border外面消失；如果有背景图不平铺的话，背景图会在border里面就消失。而且，还发现background-color是从border的左上角到右下角的，而border-image是从padding的左上角到右下角的。

这个图诠释的很清楚啦

我做的小例子，在chorme下是这样的情形，

然后我查了看mdn的background-image文章，里面是这样描述的

解释为：CSS属性设置的有背景图像的背景图像,为一个元素。图像是画在连续叠加背景层,指定了第一个被画好像它是最接近用户。元素的边界然后画在上面,他们脚下的框框内背景色画。

然后我根据他的描述画了一个示意图：

 

 

参考资料：http://www.w3cplus.com/content/css3-background-clip

https://developer.mozilla.org/en-US/docs/CSS/background-image

http://99jty.com/?p=756

 

转载于:https://www.cnblogs.com/different/archive/2012/09/22/2698222.html