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>
文字特效在浏览器中的具体显示效果如下图所示:
本WordPress网站上面的站点名称“雨飞叶”就使用了text-shadow的文字特效,文本阴影大小我只使用了1px(1像素),所以效果不明显。