CSS3下的渐变文字效果实现

一、 步骤一：借助mask-image属性

假如您手头上的阅读器是Chrome或是Safari，则您 可以在demo页面中看到 类似下面的 动机：

相应的HTML代码如下：

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

.text-gradient {<p>display: inline-block;</P><p>font-family: ´微软雅黑´;</P><p>font-size: 10em;</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/web/news/2023/3m87429.html" target=_blank > 联想跨界造车，是跟风还是搅局？ </a></td><td><a href="http://www.zhujiangroad.com/digi/news/2022/6a17638.html" target=_blank > 摄影师背包的解密 专业摄影师如何搭配镜头 </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/software/news/2023/9m88321.html" target=_blank > 华为鸿蒙原生应用全面启动：将和安卓系统决裂 </a></td><td><a href="http://www.zhujiangroad.com/net/html/69775.html" target=_blank > 怎么制作移动网站 </a></td></tr></table></div><p>position: relative;</P><p>} </P><p>.text-gradient[data-text]::after {</P><p>content: attr(data-text);</P><p>color: green;</P><div class="tj_content hidden-xs"><table width=600 border=0 cellspacing=0 cellpadding=2 align=center class=title14><tr align=center><td><a href="http://www.zhujiangroad.com/net/news/2020/10a17480.html" target=_blank > 路由器市场中的WiFi 6究竟是个啥？ </a></td><td><a href="http://www.zhujiangroad.com/news/html/2021/12a17565.html" target=_blank > 电脑虚拟内存是什么？该如何设置？ </a></td></tr> <tr align=center><td><a href="http://www.zhujiangroad.com/dc/news/2013/8a16469.html" target=_blank > 实例讲解巧用延时自拍：巧妙的构想 </a></td><td><a href="http://www.zhujiangroad.com/software/news/2020/10m82161.html" target=_blank > 微信又双叒更新了，这些功能都被禁用了 </a></td></tr></table></div><p>position: absolute;</P><p>left: 0;</P><p>z-index: 2;</P><p>-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));</P><p>}</P>

从CSS代码 可以看出， 动机的实现除了“content内容生成技术”以外，重要是 使用了mask-image属性，内容则是“webkit核心阅读器下的渐变”了 。

二、 步骤二：background-clip + text-fill-color下的实现

您 可以狠狠地点击这里：CSS3下的渐变文字 动机 步骤二demo

假如您手头上的阅读器是Chrome或是Safari，则您 可以在demo页面中看到 类似下面的 动机：

此处实现 绝对上面要 方便些，HTML代码如下：

<h2 class="text-gradient">天赐美妞</h2>

与HTML 绝对应的CSS代码如下：

.text-gradient {<p>display: inline-block;</P><p>color: green;</P><p>font-size: 10em;</P><p>font-family: ´微软雅黑´;</P><p>background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));</P><p>-webkit-background-clip: text;</P><p>-webkit-text-fill-color: transparent;</P>};

CSS代码中 要害有用的其实便是最终三行：

background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));<p>-webkit-background-clip: text;</P>-webkit-text-fill-color: transparent;

此 步骤 固然 使用的CSS属性 绝对多些，然而 构造 方便，易于操纵， 色彩的选取与操纵也更准确， 了解上也更方便 了解 。我个人是推举 使用 步骤二的 。

三、结语因为当前text-fill-color与mask-image属性貌似就webkit核心的阅读器 支撑，所以两个demo页面不得不在Chrome阅读器或是Safari阅读器下 威力看到渐变 动机 。Firefox阅读器下纯色，IE下就更不用说了 。

然而，文字渐变 本身便是 装璜性的 性能，所以，本着渐进 加强的 准则，我们在实际 名目中其实是 可以大胆 使用的 。在不影响原来 性能 根底上，几行CSS代码，让占有率愈来愈高的Chrome阅读器下有更好的视觉体验 动机，何乐而不为呢？