html5教程-小tips: CSS3 webkit下彩条文字效果实现

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

&nbs p;

.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;}

此效果用的是以前介绍过的两个技术实现，对，没错，有点水~

第一个就是 CSS 3实现纹理图案背景，我很早以前就介绍过，“小tip:CSS3下 条纹 & # 038;方格斜纹背景的实现”， 或者 可以参考著名的彩条背景图案页面：CSS3 Patterns Gallery。主要使用CSS3 linear-gra die nt/radial-gradient 以及 background-size 实现。

第二个就是文字遮罩实现，以前也介绍过，且年代更久远，“CSS3 text-fill-color简介及应用展示”， text-fill-color 可以让文字透明填充，配合 background-clip:text 就可以让文字遮罩背景显示了。

于是，当这两者混在一起的时候，我们就可以实现彩条文字效果。就是你现在看到本文的 文字颜色 效果（木有效果？请使用 webkit 内核浏览器浏览本文）！

CSS代码如下：

line-h ei ght: 20px; -webk IT -background-clip: text; -webkit -t ext-fill-color: transparent; background -i mage: 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教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-小tips: CSS3 webkit下彩条文字效果实现 全部内容，希望文章能够帮你解决 html5教程-小tips: CSS3 webkit下彩条文字效果实现 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-小tips: CSS3 webkit下彩条文字效果实现的详细内容...