CSS3文本阴影text-shadow的应用

原来用text-shadow可以设置多种漂亮、酷炫的文字特效。

先简单说明一下文本阴影text-shadow的用法:

text-shadow:x y a b;

其中

x为设置文本阴影的水平偏移距离,

y为设置文本阴影的垂直偏移距离,

a为设置文本阴影的大小,

b为设置文本阴影的颜色。

具体实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>	
	<style>
		*{margin:0; padding:0;}
		h1{
			width:600px;
			text-align:center;
			margin:5px auto;
			font-family:"alfa-slab-one";
			font-weight:900;
			font-size:100px;
		}
		.h1{
			/*设置右下角文本阴影*/
			text-shadow:6px 6px 5px #666;
		}
		.h2{
			/*设置发光文本*/
			text-shadow:0 0 10px #0f0,0 0 15px #00f;
		}
		.h3{
			/*设置空心文本*/
			color:#fff;
			text-shadow:0 0 3px #000;
		}
		.h4{
			/*设置立体文本*/
			text-shadow:-1px -1px 1px #111,-2px -2px 1px #222,-3px -3px 1px #333,-4px -4px 1px #444,-5px -5px 1px #555,-6px -6px 1px #666,-7px -7px 1px #777,-8px -8px 1px #888,-9px -9px 1px #999;
		}
	</style>
</head>

<body>
	<h1 class="h1">heartmv.com</h1>
	<h1 class="h2">heartmv.com</h1>
	<h1 class="h3">heartmv.com</h1>
	<h1 class="h4">heartmv.com</h1>
</body>
</html>

浏览器显示截图:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部