<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-clip:text</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" 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才能生效？谢谢！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS abbreviation attribute:
MDN---abbreviation attribute of CSS
When the -webkit-background-clip attribute is written after the background attribute, -webkit-background-clip overrides the default value, so it works. On the contrary, just the opposite.
The last one recognized is the valid one. No matter which attribute is the same.
So, be sure to write what you want to keep at the end.