您的位置：首页 > Web前端 > CSS

css3 ——text-shadow使用阴影叠加出的燃烧的文字特效

2012-05-04 15:18 711 查看
<!DOCTYPE><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>text-shadow</title>

<style type="text/css">

body { background:#000;}

p { text-align:center; padding:24px; margin:0; font-family:Arial,Helvetica, sans-serif; font-size:80px; font-weight:bold;color:#000;
text-shadow:0 0 4px white,0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px-25px 18px #f20;}

</style>

</head>

<body>

<p>Text<br/>Shadow</p>

</body>

</html>







立体文字特效

<!DOCTYPE><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>立体文字特效</title>

<style type="text/css">

body { background:#ccc;}

p { text-align:center; padding:24px; margin:0; font-family:Arial,Helvetica, sans-serif; font-size:80px; font-weight:bold;color:#d1d1d1;
text-shadow:-1px -1pxwhite, 1px 1px #333;}

</style>

</head>

<body>

<p>Text<br/>Shadow</p>

</body>

</html>



描边文字特效
<!DOCTYPE>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文本描边特效</title>

<style type="text/css">

body { background:#ccc;}
p { text-align:center; padding:24px; margin:0; font-family:Arial; font-size:60px; font-weight:bold; color:#d1d1d1;

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

</style>

</head>

<body>

<p>Text<br />Shadow</p>

</body>

</html>



外发光文本特效


<!DOCTYPE>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>文本外发光特效</title>

<style type="text/css">

p { text-align:center; padding:24px; margin:0; font-family:Arial;font-size:80px; font-weight:bold;

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

</style>

</head>

<body>

<p>Text<br/>Shadow</p>

</body>

</html>



注：CSS3确实是很强大，目前正在学习阶段，等到它实现标准化以后，再也不用去找那些让人头疼的js特效了！！！

目前兼容IE9，Firefox3.5，Opera9.6，Opera10.0，Opera10.5，Safari4.0及Chrome2.0x、Chrome3.0x、Chrome4.0x
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航