Rumah > Soal Jawab > teks badan
<!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才能生效?谢谢!
PHPz2017-04-17 11:28:12
CSS简写属性:
没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子,但这确实意味着,它将会覆盖之前设置的值。
MDN---CSS的简写属性
当-webkit-background-clip属性写在background属性后面,-webkit-background-clip就覆盖了默认值,所以就起作用了。反之,正好相反。