text-effect

文字特效在过去大部分都用图片代替，但是自从有了css3,前端的宝宝再也不用担心没有设计师来切图了。接下来就让我来给大家展示text-shadow的强大效果吧！

程序员必读

Css3编码技巧

1.凸凹印刷效果

the only way to get rid of a temptation is to yield to it.

text-shadow: 0 1px 1px hsla(0,0%,100%,.8);

2.空心字效果

the only way.

text-shadow: 1px 1px #000,
            -1px -1px #000,
            1px -1px #000,
            -1px 1px #000;

3.文字外发光效果(鼠标经过文字会有惊喜哦！)

hover me!

text-shadow: 0 0 .1em,
             0 0 .3em;

3.文字凸起效果

hover me!

text-shadow: 0 1px hsl(0,0%,85%),
             0 2px hsl(0,0%,80%),
             0 3px hsl(0,0%,75%),
             0 4px hsl(0,0%,70%),
             0 5px hsl(0,0%,65%),
             0 5px 10px #000;