text-shadow: h-shadow v-shadow blur(阴影的长度) color
利用text-shadow属性 做出如下效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发光字,立体字,苹果字</title>
<style type="text/css">
.faguangzi{
color: white;
text-shadow: 0px 0px 20px red;
}
.pingguozi{
color: black;
text-shadow: 0px 1px 1px white;
}
.litizi{
color: white;
text-shadow: 1px 1px rgba(197,223,248,0.8),
2px 2px rgba(197,223,248,0.8),
3px 3px rgba(197,223,248,0.8),
4px 4px rgba(197,223,248,0.8),
5px 5px rgba(197,223,248,0.8),
6px 6px rgba(197,223,248,0.8);
}
body{
background-color: #666;
text-align: center;
font: bold 50px 'Microsoft YaHei';
}
</style>
</head>
<body>
<div class="faguangzi">发光字</div>
<div class="pingguozi">苹果字</div>
<div class="litizi">立体字</div>
</body>
</html>