--webkit-background-clip与--webkit-text-fill-color属性失效问题求助：参照YouTube教程操作仍未解决

Hey there, let's troubleshoot this together! The root issue here is a tiny syntax mistake in your vendor prefixes—you’ve added an extra hyphen that’s making those webkit properties invalid.

CSS vendor prefixes like -webkit- only use one leading hyphen, not two. Double hyphens (--) are reserved for CSS custom properties (variables), so your browser is completely ignoring those miswritten lines.

Here's your corrected CSS code: #

#navbar_logo { 
  background-color: #ff8177; 
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); 
  background-size: 100%; 
  -webkit-background-clip: text; 
  -moz-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  -moz-text-fill-color: transparent; 
  display: flex; 
  align-items: center; 
  cursor: pointer; 
  text-decoration: none; 
  font-size: 2rem; 
}

Quick extra checks to be safe: #

• Double-check that the #navbar_logo selector is actually targeting your logo element (no typos in the ID name!)
• Use your browser’s dev tools to inspect the element and confirm no other CSS rules are overriding these properties
• While modern browsers support unprefixed background-clip: text and text-fill-color: transparent, keeping the -webkit- and -moz- prefixes ensures compatibility with older browser versions.

Give this adjusted code a try, and your gradient text should show up exactly like it does in the tutorial!

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