CSS设置background-clip: text后，背景为何未按预期裁剪到文本上？

核心问题 #

代码属性书写顺序错误是效果不生效的根本原因。
background属于CSS简写属性，执行时会重置所有关联的背景子属性，包含background-clip。当前代码的书写逻辑是：先单独设置background-clip: text，再通过简写属性background: red配置背景值——这个过程中，之前单独设置的background-clip会被直接重置为浏览器默认的border-box值，自然无法实现将背景裁剪到文本区域的效果。

可直接复用的正确代码 #

需要将background的简写设置放在最前方，再编写背景裁剪的相关规则；同时为了保证多浏览器下的生效稳定性，需要补充带webkit前缀的裁剪设置：

h1 {
  color: transparent;
  /* 背景配置放在最前面，纯色、渐变值都可以写在这里 */
  background: red;
  /* 裁剪属性放在背景设置之后，不会被简写属性覆盖 */
  -webkit-background-clip: text;
  background-clip: text;
}

换回渐变效果的操作说明 #

排查完成后只要把background对应的属性值替换为需要的渐变规则即可，比如替换为background: linear-gradient(45deg, #ff0000, #0000ff)，配合现有裁剪规则就能正常生成带渐变效果的标题文本。

注意事项：不要在单独设置过背景类子属性之后，再写background简写，否则之前配置的所有单独背景规则都会被覆盖失效。

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