前端 - CSS3問題：請問-webkit-background-clip屬性，需要寫在background屬性后面嗎？
問題描述
<!DOCTYPE html><html><head><meta charset='utf-8'><title>background-clip:text</title><meta name='description' content=''><meta name='keywords' content=''><link href='http://m.b3g6.com/wenda/6013.html' rel='stylesheet'><style>*{margin: 0; padding: 0;}p{width: 300px; height: 60px; border: 1px solid #000; margin: 50px auto; font-size: 50px; font-weight: bold; text-align: center; line-height: 60px; /* -webkit-background-clip: text; 寫在background上面則clip不生效*/ background: -webkit-linear-gradient(red,blue); -webkit-background-clip: text; /*寫在background屬性下面，正常*/ color: rgba(0,0,0,0);}</style></head><body> <p>你好啊！</p> </body></html>
請問一下，為什么 -webkit-background-clip:text;，需要寫在background屬性的后面，clip才能生效？謝謝！
問題解答
回答1：CSS簡寫屬性：
沒有指定的值會被設置為它的初始值。這聽起來似乎本來就很合理的樣子，但這確實意味著，它將會覆蓋之前設置的值。
MDN---CSS的簡寫屬性
當-webkit-background-clip屬性寫在background屬性后面，-webkit-background-clip就覆蓋了默認值，所以就起作用了。反之，正好相反。
回答2：最后識別的一個就是有效的。無論是那個屬性都是一樣的。所以，一定要確保想要保留的寫在最后。
網公網安備