• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

5.2 文字阴影text-shadow属性

一、text-shadow属性简介

在CSS2中,如果想要实现文字的阴影效果,我们一般都是使用Photoshop等来实现。但是在CSS3中,这种效果用一个text-shadow属性就能实现了。几句代码即可搞定,简单好用。

语法:

 
text-shadow:x-offset  y-offset  blur  color;

说明:

x-offset:(水平阴影)表示阴影的水平偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移;

y-offset:(垂直阴影)表示阴影的垂直偏移距离,单位可以是px、em或者百分比等。如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移;

blur:(模糊距离)表示阴影的模糊程度,单位可以是px、em或者百分比等。blur值不能为负。如果值越大,则阴影越模糊;如果值越小,则阴影越清晰。当然,如果不需要阴影模糊效果,可以吧blur值设置为0;

color:(阴影的颜色)表示阴影的颜色,可以使用绿叶学习网的“在线调色板”获取。

1、一般文字阴影效果

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray;
            -webkit-text-shadow: 4px 4px 2px gray;
            -moz-text-shadow: 4px 4px 2px gray;
        }
    </style>
</head>
<body>
    <div id="lvye">绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

分析:

从上面的在线测试,我们可以得出以下结论:

(1)阴影偏移分为水平方向和垂直方向这2个方向,x-offset值指的是阴影到原文本的水平距离,y-offset值指的是阴影到原文本的垂直距离;

(2)x-offset与y-offset允许为负值;

(3)添加阴影偏移距离之后,可以指定一个模糊半径blur。模糊半径是一个长度值,表示阴影模糊效果的范围;

2、文字凸起效果与凸起效果

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        div
        {
            display:inline-block;
            padding:20px;
            font-size:40px;
            font-family:Verdana;
            font-weight:bold;
            background-color:#CCC;
            color:#ddd;
            text-shadow:-1px 0 #333, /*向左阴影*/
                         0 -1px #333,/*向上阴影*/
                         1px 0 #333, /*向右阴影*/
                         0 1px #333 ;/*向下阴影*/
        }
    </style>
</head>
<body>
    <div>helicopter</div>
</body>
</html>

在浏览器预览效果如下:

当然,为了表现更加丰富,每个方向上得阴影的颜色可以有不同的设置。如果将向左和向上的阴影颜色设置为白色,文字就会有凸起的效果。修改text-shadow属性如下:

 
text-shadow:-1px 0 #FFF, /*向左阴影*/
            0 -1px #FFF, /*向上阴影*/
            1px 0 #333,  /*向右阴影*/
            0 1px #333;  /*向下阴影*/

在浏览器预览效果如下:

如果将向右和向下的阴影颜色设置为白色,文字就会有凹陷的效果。修改text-shadow属性如下:

 
text-shadow:-1px 0 #333, /*向左阴影*/
            0 -1px #333, /*向上阴影*/
            1px 0 #FFF,  /*向右阴影*/
            0 1px #FFF;  /*向下阴影*/

在浏览器预览效果如下:

小伙伴们是不是觉得很神奇呢?当然在这里,颜色的取值和阴影方向是很有技巧的,大家好好琢磨一下这些效果的代码实现。

二、text-shadow属性指定多个阴影

在CSS3中,可以使用text-shadow属性来给文字指定多个阴影,并且针对每个阴影使用不同的颜色。也就是说,text-shadow属性可以为一个以英文逗号隔开的“值列表”,如:

 
text-shadow:0 0 4px white,  0 -5px 4px #ff3,  2px -10px 6px #fd3;

当text-shadow属性值为“值列表”时,阴影效果会按照给定的值顺序应用到该元素的文本上,因此有可能出现互相覆盖的现象。但是text-shadow属性永远不会覆盖文本本身,阴影效果也不会改变边框的尺寸。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        #lvye
        {
            font-size:40px;
            text-shadow:4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
            -webkit-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
            -moz-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
        }
    </style>
</head>
<body>
    <div id="lvye">绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

下面,我们使用text-shadow属性制作更为复杂的文本特效——火焰字。

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-shadow属性</title>
    <style type="text/css">
        p
        {
            text-align:center;
            color:#45B823;
            padding:20px 0 0 20px;
            background-color:#FFF;
            font-size:60px;
            font-weight:bold;
            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>绿叶学习网</p>
</body>
</html>

在浏览器预览效果如下:

分析:

上面是使用text-shadow属性制作的火焰字效果,相信小伙伴们又一次被CSS3效果给折服了吧。实现火焰字效果原理很简单:text-shadow属性取值使用“值列表”。但是呢,这些颜色和模糊半径等的取值需要我们细心地一点点做测试才能最终做出这样的效果,会比较费时间,但是这种炫丽的特性确实也是拿来装逼的资本。

其实在第一章中,那个绚丽的CSS3动画效果中就用到了指定多个阴影的text-shadow属性。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部