为什么CSS属性background-clip: content-box设置后不生效？

问题原因 #

你把padding样式添加到了.temp的子元素h3上，而background-clip是针对设置该属性的元素自身的盒模型生效的，你当前是给.temp设置的background-clip: content-box，所以需要给.temp元素本身设置padding才能看到裁剪效果。

如果.temp自身的padding为0，它的内容区和内边距区范围完全重合，content-box和padding-box的表现看起来就没有区别，自然会觉得content-box没有生效。子元素的padding只会影响子元素自身的布局，不会修改父元素的盒模型边界，对父元素的background-clip规则完全不起作用。

修复方案 #

给.temp元素本身添加padding属性即可，示例修改代码如下：

.temp {
    width: 400px;
    height: 300px;
    background-color: rgb(255, 153, 141);
    background-clip: content-box;
    border: 9px dotted blue;
    margin: 20px;
    float: left;
    text-align: center;
    /* 给当前元素自身添加padding，即可看到content-box效果 */
    padding: 20px;
}

.temp h3 {
    padding-top: 90px;
    /* 清除h3默认的上下margin，避免出现额外的布局偏移 */
    margin: 0;
}

修改后你就能看到明显的content-box效果：背景只会渲染在.temp padding内侧的内容区域，padding区域会透出底层的背景。

内容的提问来源于stack exchange，提问作者Hasnain