background-clip没有效果

当给一个div盒子添加backgound-clip: content-box属性的时候，原本想要的效果是背景在内容区显示，但是却一直没有该属性应有的效果。

代码：

main {
    display: flex;
    width: 300px;
    height: 300px;
    margin: 10px auto;
    border: 1px solid red;
    flex-flow: row wrap;
    align-items: flex-start;
}

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    background-clip: content-box;
    background: linear-gradient(to top,pink,palegoldenrod);
}

原因：
background属性是包括background-clip属性在内的背景属性的简写方式，且css解析是从上往下解析的。所以background属性写在后面导致background-clip属性失效。
解决的方式：
将backgound-clip属性放在background属性之后，或者写在background属性内。

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    background: linear-gradient(to top,pink,palegoldenrod);
    background-clip: content-box; // 放在后面
}

或者
background: linear-gradient(to top,pink,palegoldenrod) content-box;
或者单独写
background-clip: content-box;
background-image: linear-gradient(to top,pink,palegoldenrod) ;

最后是自己希望的结果了

附：为啥background属性写在background-clip之后会失效，具体原因也不是很清楚，如果有知晓的，还望解惑！