css3实现文字渐变色，background-image和background-clip
作者：Miao 阅读：3024次
给文字渐变很简单，只需要用到css3的background-image和background-clip属性，我们先来看看效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 实现文字渐变色</title>
</head>
<style type="text/css">
#linear-gradient {
font-size: 24px;
background-image: linear-gradient(red, blue);
-webkit-background-clip: text;
color: transparent;
}
</style>
<body>
<div id="linear-gradient">渐变的文字效果</div>
</body>
</html>效果预览：
知识点：
background-clip 背景裁剪
目前background-clip: text只有chrome支持，所以我们直接写成-webkit-background-clip:text;
这个属性的意思表示以区块文字作为裁剪区域向外裁剪，文字背景色=区块背景色。
color: transparent;
这个属性的意思就是把文字设为透明，因为我们的文字是有颜色的，只有把文字设为透明后面的背景色才能看到后面的背景色。
本站部分文章、数据、素材收集于网络，所有版权均归源网站或原作者所有！
如果侵犯了您的权益，请来信告知我们下线删除，邮箱：357234902@qq.com
