CSS3文字特效

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

闲言少叙，直接上代码

 

p
{
text-shadow : 0.2em /*水平位移，正值右*/ 0.2em /*水平位移，正值右*/ 0.2em /*模糊半径*/ blue /*阴影颜色*/ ;
}
/*多重阴影*/ .p 1
{
text-shadow : 0.2em 0.2em 0.2em blue , -0.2em -0.2em 0.2em yellow, 0.4em -0.2em 0.2em red ;
}
/*火焰字*/ .p 2
{
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 ;
}
/*立体字*/ .p 3
{
background-color : #ccc ;
color : #d1d1d1 ;
height : 20px ;
padding : 35px ;
text-shadow : -1px -1px white , 1px 1px #333 ;
}
/*外发光*/ .p 4
{
height : 20px ;
padding : 35px ;
text-shadow : 0 0 0.2em #f87 , 0 0 0.2em #f87 ;
}
/*描边字*/ .p 5
{
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相关内容