IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

5f16a58a57bc47108e1c532aebeafd05.jpg

 

文字阴影是可以叠加的。最基本可以给出四个值,用法如下:

text-shadow:x y blur color

文字阴影的参数说明如表1所示。

表1  CSS3文字阴影参数说明

 

bcd89c14d87d4f8cb11b60d0ce5b8dfe.png

 

横向偏移量和纵向偏移量可以为负值,代表文字阴影向左偏移或向上偏移。文字阴影是可以叠加的,但是加很多层,会影响页面加载速度。添加多层阴影用“,”隔开。阴影叠加是先渲染前面的,再渲染后面的。

1.最简单的用法

text-shadow:2px 2px 4px #000;

此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2px,模糊距离为4px的黑色阴影。以下是一个单层阴影的例子。代码如下:

44af1b6f6e534eda865a66627f34b19f.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,如图1所示:

f349624b39074896aa4a27e8d0ef9d74.jpg

图1  文字单层阴影

 

2.阴影叠加

text-shadow:2px 2px 0px red,2px 2px 4px green;

此语法说明为一段文字设定双层阴影。第一层为横向偏移量为2px,纵向偏移量为2px,模糊距离为0的红色阴影,第二层为横向偏移量为2px,纵向偏移量为2px,模糊距离为4px的绿色阴影。对于多层阴影,浏览器先渲染前面的阴影,再渲染后面的阴影。以下是一个双层阴影的例子。代码如下:

edd6c668e9864e99be49e5346c5c89a2.png

 

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,段落文字被加上了两层阴影,如图2所示。

e7d2d2b0afe44ce5ab5cce0f85b44263.jpg

图2 文字双层阴影

 

3.几个有趣的例子

(1)层叠:

b35bbcbe26e94a86a0f25b9c780823ab.jpg

将这段代码写在段落样式表中后在浏览器中运行,我们就可以看到蓝色层叠的文字效果,如图3所示。

976cf945150b44909f0dd1ffa5b11347.jpg

图3  文字层叠效果

 

(2)光晕:

8adf488262fd49d9aaa39dc5dc4cbeaa.jpg

将这段代码写在段落样式表中后在浏览器中运行,我们就可以看到蓝色光晕的文字效果,如图4所示。

41ee43ac59af41ad9721f1af0f903518.jpg

图4  文字光晕效果

 

(3)火焰文字:

08ef681c044b42aabc6e80d89a452b4a.jpg

 

将这段代码写在段落样式表中后在浏览器中运行,我们就可以看到蓝色光晕的文字效果,如图5所示。

0830c2ee045c45adb45d19444e7f1b07.jpg

图5  火焰文字效果

posted on 2019-11-12 08:35  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航