先上一张效果图，大家看看
一般都是用text-shadow来给文字加阴影的。
.text{
font:100px "微软雅黑";
font-weight:bold;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8);
color:#c60df0;
}
单纯投影效果
我还想要文字颜色渐变呢？来个最简单的从上到下：
常用方法:mask-image
.text{
font:100px "微软雅黑";
font-weight:bold;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8);
color:#c60df0;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0)));
}
单纯渐变色
哇，好单调，能不能渐变的色彩丰富一些？你自己去-webkit-gradient()中慢慢调吧，心累，不弄了。我先使用伪元素来再增加一个字体颜色，来看渐变效果容易些。下面是使用伪元素渐变的效果。
.text{
font:100px "微软雅黑";
font-weight:bold;
position:relative;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8); color:#c60df0;
}
.text:after{
position:absolute;
left:0px;
content:"好奇心";
color:#ea0000;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0)));
text-shadow:0px 0px 2px rgba(234,0,0,1);
}
好丑陋的颜色
说好的高亮呢？看如下代码(省去文字颜色渐变效果)
.text{
font:100px "微软雅黑";
font-weight:bold;
text-shadow: 1px 2px 3px rgba(67,8,7,0.8);
color:#c60df0;
position:relative;
}
.text:before{content:"好奇心";
text-shadow:0px 0px 5px rgba(255,255,255,0.8);
position:absolute; left:0px;
color:rgba(0,0,0,0);
}
当前效果
所以需要思考的来了：白色是怎么出现在文字内部的？
可以先简单看一下将before中的position去掉的情况：
before中去掉position
这样看起来就显而易见了，应用before的文字为白色，边缘有透明度，而且应用了position:absolute，浮于原来文字之上，而周边的透明度漏出了原来text的底色，看起来就好像是内部发光了。
那么：此时的color必须用rgba样式吗?
是这样的。
先抛出个有意思的问题：rgba(0,0,0,0),其中的a代表的是透明度。当a=1时完全透明，a=0时不透明，那么文字也就不可见了。但是，当加上text-shadow之后，text就耐不住寂寞的又显示出来了，而且穿上了text-shadow带来的颜色的外衣！这个还是挺让我费解的text-shadow和text的颜色一定有勾结！！！
因为一般的高亮效果内部颜色都是白色的，所以这儿使用rgba()，a的透明度要写的小一点才更逼真，并且用透明度的最大作用就是让文字的边缘部分可以透明点露出正常文本的颜色，也就是所谓的描边效果。这样里外的颜色一对比，就显得是高亮了。
最终效果图
额，颜色搭配真是丑到没朋友。。。
这时候不得不把渐变色用到一个伪元素after（这样就省了添加z-index的麻烦）中，使其显示在最上层，不被覆盖。层叠顺序由低到高依次是正常文本——>before——>after。
遗留问题：
1、text-shadow中的颜色和color的猫腻
2、属性的兼容性
3、应用场景：先附上两个应用mask-image的案例：http://web.jobbole.com/84766/
http://www.w3cplus.com/demo/681.html
网友评论