css3实现文字渐变色，background-image和background-clip 作者：admin 阅读：2009次 给文字渐变很简单，只需要用到css3的background-image和background-clip属性，我们先来看看效果： ```html <!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; 这个属性的意思就是把文字设为透明，因为我们的文字是有颜色的，只有把文字设为透明后面的背景色才能看到后面的背景色。 赞一个 (17) 本站部分文章、数据、素材收集于互联网，一切版权均归源网站或原作者所有！ 如果侵犯了您的权益请来信告知我们删除，邮箱：357234902@qq.com 标签：CSS 上一篇:没有了！ 下一篇:深入理解css3动画：animation、transform、transition
