DIV教程之CSS实例教程:利用CSS3完成完成笔墨突变办法

只看该作者 · 发表于 2015-1-15 23:15:06

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
破洛洛文章简介：我们有宣布过CSS笔墨突变效果，可是实在那并非地道的基于CSS的突变，它必要一张半通明突变的png图片。明天我们将先容两种利用CSS3完成完成笔墨的办法。
之前，我们有宣布过CSS笔墨突变效果，可是实在那并非地道的基于CSS的突变，它必要一张半通明突变的png图片。明天我们将先容两种利用CSS3完成完成笔墨的办法。嗯，只要webkit扫瞄器撑持，请临时忽视别的扫瞄器。
1.-webkit-mask

在《CSS的将来：一些实验性CSS属性》中，我们提到了这个属性，相对Firefox只能用svg做mask，webkit则天真良多，图片和css3突变都可。最后注重到这类效果是在舜子的PJblog中：

.textGradient1{-webkit-mask:-webkit-gradient(linear,0%0%,0%100%,from(rgba(222,187,71,0.8)),to(rgba(36,142,36,0.2)));}

复制代码

不敷：这个办法是使用蒙板的通明度来完成的，而蒙板的色彩其实不能用于突变中，从例子中能够看到设置的突变色被忽视了，有效的只是alpha值。那末这里的突变要依附字体的色彩——也就是说，只撑持单色突变。
2.-webkit-background-clip:text

严厉来讲，这个办法必要几个属性组合，包含color/-webkit-text-fill-color和背景突变：

.textGradient2{background:-webkit-gradient(linear,0%0%,0%100%,from(#DEBB47),to(#248F24));color:transparent;/*-webkit-text-fill-color:transparent;*/-webkit-background-clip:text;}

复制代码

要点：

color/-webkit-text-fill-color的目标是一样的，就是让笔墨通明，由于别的扫瞄器不撑持上面的属性值，以是这里倡议接纳后者，color属性会让笔墨在别的扫瞄器中通明失落。
-webkit-background-clip属性的text值是webkit独占的，gecko、opera和IE9固然也撑持这个属性，可是其实不撑持text值，这是关头地点。
到如今人人应当能看到这个办法的道理是将笔墨挖空，从而显露背景致。以是背景致在这里是关头，而背景致的突变可使用任何色彩，以是，这个办法撑持真实的黑色突变。

这里是一个复杂的在线演示，预览效果：