css3 text-shadow 

<!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; */

posted @ 2016-04-07 19:29  mingjixiaohui  阅读(277)  评论(0)    收藏  举报