用CSS3可以很简单地实现文字渐变效果

background-clip , text-fill-color
服务器君一共花费了457.026 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

首先要说明,你的浏览器支持CSS3的话,才能看到正确的演示效果。如果你现在用的浏览器是Chrome、Safari等,就是你的浏览器支持background-clip + text-fill-color等CSS3属性,那么你可以看到下面文字渐变的漂亮效果:

简明现代魔法

CSS(CSS代码中关键有用的其实就是最后三行):

<style type="text/css">
.text-gradient {
     display: inline-block;
     color: green;
     font-size: 8em; 
     font-family: 微软雅黑;
     background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}; 
</style>
<h2 class="text-gradient">简明现代魔法</h2>

由于目前text-fill-color属性貌似就webkit核心的浏览器支持,所以两个demo页面只能在Chrome浏览器或是Safari浏览器下才能看到渐变效果。Firefox浏览器下纯色,IE下就更不用说了。

但是,文字渐变本身就是装饰性的功能,所以,本着渐进增强的原则,我们在实际项目中其实是可以大胆使用的。在不影响原来功能基础上,几行CSS代码,让占有率愈来愈高的Chrome浏览器下有更好的视觉体验效果,何乐而不为呢?

background-clip

background-clip:用来确定背景的裁剪区域。

background-clip是css3.0中新增加的属性,一般喜欢将background-clip与background-origin和background-size一起应用。其中background-clip 和 background-origin 是 CSS3 中新加的 background module 属性,用来确定背景的定位。background-clip 用来确定背景的裁剪区域。而 background-origin 用来决 定 background-position 计算的参考位置。

首先background-clip在浏览器兼容性: IE和遨游不支持(不知IE9是否支持)。 Firefox添加 私有属性-moz-background-clip支持。 Safari和Chrome添加私有属性-webkit-background-clip支持。 Opera: 不支持background-clip属性,添加其私有属性-o-background-clip也不支持。

语法:background-clip : border | padding | content

  • border:从border区域向外裁剪掉背景。(超出部分就被减掉)
  • padding:从padding区域向外裁剪掉背景。 (超出部分就被减掉)
  • content:从content区域向外裁剪掉背景。(超出部分就被减掉)

text-fill-color

text-fill-color是CSS3中的属性,表示文字颜色填充,实现的效果基本上与color一样,目前仅webkit核心的浏览器下支持此属性,与之类似的还有一个属性就是text-stroke表示文本描边,本文主要展示text-fill-color的应用,text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的,如果同时设置color与text-fill-color属性,显然是颜色填充覆盖本身的颜色,也就是文字显示text-fill-color设置的颜色(当然在浏览器支持text-fill-color属性的情况下)。虽然说,text-fill-color≈color,但是毕竟还是有差别的,就表现效果上来讲,text-fill-color还支持一个transparent属性,也就是透明填充。而这一属性可以实现一些精湛的UI表现,例如文字遮罩。

本文地址:http://www.nowamagic.net/librarys/veda/detail/1599,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1599

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Python学习手册(第4版)》 鲁特兹(Mark Lutz) (作者), 李军 (译者), 刘红伟 (译者), 等 (译者)

《Python学习手册(第4版)》学习Python的主要内建对象类型:数字、列表和字典。使用Python语句创建和处理对象,并且学习Python的通用语法模型。使用函数构造和重用代码,函数是Python的基本过程工具。学习Python模块:封装语句、函数以及其他工具,以便构建较大的组件。学习Python的面向对象编程工具,用于组织程序代码。学习异常处理模型,以及用于编写较大程序的开发工具。了解高级Python工具,如装饰器、描述器、元类和Unicode处理等。

更多计算机宝库...