文本阴影text-shadow

CSS 快速掌握 admin 497浏览

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