CSS3基础CSS3给文字加阴影效果 text-shadow属性

CSS3给文字加阴影效果 text-shadow属性

通过text-shadow属性可以向文本添加一个或多个阴影,它的基本语法是:选择器 {text-shadow:水平位置 垂直位置 模糊度 颜色;},例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
h1 {margin:50px;
color:blue;
text-shadow: 8px 8px 5px yellow;
}
</style>
</head>
<body>
<h1>United States of America</h1>
</body>
</html>

浏览这个网页,我们发现h1中的文字被加上了阴影。

文字阴影.png

这里text-shadow属性的三个值可以不定义第三个值“模糊度”,即h1 {text-shadow: 8px 8px yellow;}也是正确的做法,这时候相当于阴影不进行模糊。

其中水平位置和垂直位置可以定义为负值,当这两个值定义为负值时,原本右下角的阴影会出现在左上角,当然一正一负的话其位置也会有相应的变化。

如果把前三个属性值都定义为0的话,那么就不显示阴影,和没定义一样,如果把前两个值定义为0,再定义一个模糊度的话,我们来试试有什么效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3测试</title>
<style type="text/css">
h1 {margin:50px;
color:blue;
text-shadow: 0px 0px 8px yellow;
}
</style>
</head>
<body>
<h1>United States of America</h1>
</body>
</html>

我们发现文字的四周出现均匀的阴影,类似于发光字的效果。

文字阴影2.png

文本阴影属性可以同时设置多个阴影,将多个阴影设置之间以逗号隔开即可,例如:

h2 {text-shadow:2px 2px 5px #333333, -7px 2px 9px #330B2B;}

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/28.html