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

 

你可能感兴趣的:(background)