CSS3.0之text-shadow属性

CSS3.0的text shadwo属性已经出现一段时间了,下面就分享一下收集的关于text-shadow效果的使用案例!如果你仔细研究了这些,你必将对text-shadow有更加深入的了解。
text-shadow其语法包括投影X轴偏移、Y轴偏移、模糊参数以及投影颜色,看下图。

一、vintage 文字效果
效果:

代码:

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

学习要点:text-shadow通过同时设置多个投影效果实现

二、Neon 文字效果
效果:

代码:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

学习要点:text-shadow保持x、y轴偏移不变,逐渐增大模糊参数的数值及变幻颜色实现。

三、Anaglyphic 文字效果
效果:

代码:

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

学习要点:text-shadow与rgba结合实现,颜色采用rgb的颜色格式Red (R)、Green (G)、Blue (B),a为透明程度opacity/alpha。

关于text-shadow的更多案例详见 www.line25.com



你可能感兴趣的:(css3)