Skip to content

Instantly share code, notes, and snippets.

@zikkeung

zikkeung/渐变文字

Created July 23, 2013 09:51
Show Gist options
  • Save zikkeung/6061262 to your computer and use it in GitHub Desktop.
Save zikkeung/6061262 to your computer and use it in GitHub Desktop.
Download ZIP
-webkit-text-fill-color: transparent;
Raw
渐变文字
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
p{
font-size:20px;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<p>此效果仅限于webkit内核，先设置background-image为渐变的颜色，然后设置-webkit-background-clip为text，最后设置填充颜色为透明即-webkit-text-fill-color: transparent;</p>
</body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment