text-shadow:水平阴影|垂直阴影|模糊距离|阴影颜色
注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table{
border-collapse: collapse;
border-color: #ccc;
}
.box{
font-size: 20px;
font-family: "微软雅黑";
color: #f90;
/* text-shadow:水平阴影|垂直阴影|模糊距离|阴影颜色 */
text-shadow: 5px 4px 4px #f00,7px 6px 4px #0f0;
margin-top: 100px;
}
</style>
</head>
<body>
<table width="400" border="1">
<tr>
<th>值</th>
<th>描述</th>
</tr>
<tr>
<td>h-shadow</td>
<td>必需,水平阴影的位置</td>
</tr>
<tr>
<td>v-shadow</td>
<td>必需,垂直阴影的位置</td>
</tr>
<tr>
<td>blur</td>
<td>可选,模糊距离</td>
</tr>
<tr>
<td>color</td>
<td>可选,阴影颜色</td>
</tr>
</table>
<div class="box">文本阴影效果图展示</div>
</body>
</html>
结论：
●水平阴影正值阴影在右边负值在左边;
●垂直阴影正值在下边，负值在上边;
●模糊强度，值越大越模糊;
●文字阴影可以有多组值，多组之间用逗号隔开就可以;
转载请注明：大灰牛博客 » 文本阴影text-shadow