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