我的个人网络私密空间

CSS3文本阴影text-shadow使用说明

text-shadow是CSS3新增的文本阴影属性样式,可以设置多种漂亮、酷炫的文字特效。

下面,本作先简单说明一下文本阴影text-shadow的属性:

text-shadow:x y a b;

其中

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

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

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

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

text-shadow设置文字特效的具体实例代码:

<!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>

文字特效在浏览器中的具体显示效果如下图所示:

text-shadow设置的文字特效
text-shadow设置的文字特效

本WordPress网站上面的站点名称“雨飞叶”就使用了text-shadow的文字特效,文本阴影大小我只使用了1px(1像素),所以效果不明显。

看完该文章有什么感受?
转载请注明来源:雨飞叶 » CSS3文本阴影text-shadow使用说明

评论 抢沙发

理智防人:耳听可能假,眼见未必实。安全拒绝:我要想清楚,明天答复你。

网站建设与资源变现上网学习找资源教程