小tips: CSS3 webkit下彩条文字效果实现
导读：收集整理的这篇文章主要介绍了html5教程-小tips: CSS3 webkit下彩条文字效果实现，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-小tips: CSS3 webkit下彩条文字效果实现，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 .widecolumn .entry{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-top:0;
line-height: 20px;
background-image: linear-gradient( to bottom, #9588DD, #9588DD 25%, #DD88C8 25%, #DD88C8 50%, #D3DD88 50%, #D3DD88 75%, #88B0DD 75%, #88B0DD);
background-size: 100% 80px;
}
.entry p{
padding:0;
margin:20px 0;
}
.entry p code, .entry .similarity {
-webkit-text-fill-color: #333;
line-height:18px;
}
.entry .zxx_code pre {
-webkit-text-fill-color: blue;
}
.entry .zxx_code{
padding:9px 10px;
margin:10px 0;
}
此效果用的是以前介绍过的两个技术实现，对，没错，有点水~
第一个就是CSS3实现纹理图案背景，我很早以前就介绍过，“小tip:CSS3下条纹&
方格斜纹背景的实现”，或者可以参考著名的彩条背景图案页面：CSS3 Patterns Gallery。主要使用CSS3 linear-gradient/radial-gradient以及background-size实现。
第二个就是文字遮罩实现，以前也介绍过，且年代更久远，“CSS3 text-fill-color简介及应用展示”，text-fill-color可以让文字透明填充，配合background-clip:text就可以让文字遮罩背景显示了。
于是，当这两者混在一起的时候，我们就可以实现彩条文字效果。就是你现在看到本文的文字颜色效果（木有效果？请使用webkit内核浏览器浏览本文）！
CSS代码如下：
line-height: 20px;
-webkIT-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient( to bottom, #9588DD, #9588DD 25%, #DD88C8 25%, #DD88C8 50%, #D3DD88 50%, #D3DD88 75%, #88B0DD 75%, #88B0DD);
background-Size: 100% 80px;
彩条背景应该如下：
配合文字遮罩，既有了我们想要的效果。
好了，over, 果然很水~
参考文章：Fun with line-height!
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 小tips: CSS3 webkit下彩条文字效果实现
本文地址： https://pptw.com/jishu/586803.html