CSS3文字特效

首先我们先来看一下效果吧！

闲言少叙，直接上代码

 

p

{

text-shadow: 0.2em /*水平位移，正值右*/ 0.2em /*水平位移，正值右*/ 0.2em /*模糊半径*/ blue /*阴影颜色*/;

}

/*多重阴影*/.p1

{

text-shadow: 0.2em 0.2em 0.2em blue, -0.2em -0.2em 0.2em yellow, 0.4em -0.2em 0.2em red;

}

/*火焰字*/.p2

{

background-color: Black;

height: 30px;

padding: 35px;

text-shadow: 0 0 4px white, -0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80,-2px -25px 18px #f20;

}

/*立体字*/.p3

{

background-color: #ccc;

color: #d1d1d1;

height: 20px;

padding: 35px;

text-shadow: -1px -1px white,1px 1px #333;

}

/*外发光*/.p4

{

height: 20px;

padding: 35px;

text-shadow: 0 0 0.2em #f87, 0 0 0.2em #f87;

}

/*描边字*/.p5

{

height: 20px;

padding: 35px;

color: White;

text-shadow: -1px 0 black,0 1px black,1px 0 black,0 -1px black;

}

DEMO演示

注释写的还算比较清楚，直接赋值可用。

另外提醒大家，如果配合一些伪类来书写这些效果，可能会更好。如:hover的时候加上这些，是不是很炫丽呢？

欢迎访问我的原文博客：http://qdgcs.co.cc/ ，这个博客近期将持续更新HTML5+CSS3+Js相关内容