<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
text-align:center;
font:bold 60px helvetica; arial, sans-serif;
color:#999;
/* text-shadow属性的第一个值表示水平位移 第二个值表示垂直位移 正直为偏有或偏下
负值为偏左或偏上 第三个值表示模糊半径，该值可选 第四个值表示阴影的颜色该值可选
*/
/* x轴 y轴 颜色 */
text-shadow:0.1em 0.1em #333;
text-shadow:0.1em 0.1em 0.3em black;
}
</style>
</head>
<body>
<p>HTML5 + CSS3</p>
</body>
</html>
定义多色阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
text-align:center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow:0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;
}
</style>
</head>
<body>
<p>HTML+CSS3</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{background:#000;}
p{
text-align:center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
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>HTML+CSS3</p>
</body>
</html>
/* 定义立体字 */
/* 文字凸起 */
/* text-shadow:1px 1px white,
-1px -1px #333; */
/* 文字凹起 */
/* text-shadow:1px 1px white,
-1px -1px #333; */
/* 描边文字 */
/* background:#ccc;
text-shadow:-1px 0 black,
0 1px black,
1px 0 black,
0 -1px black; */
/* 外发光文字 */
/* text-shadow:0 0 0.2em #f87,
0 0 0.2em #f87; */