标签：ef6 例子 bsp tle bcb c4c 最简 文字 样式表
文字阴影是可以叠加的。最基本可以给出四个值，用法如下：
text-shadow：x y blur color
文字阴影的参数说明如表1所示。
表1 CSS3文字阴影参数说明
横向偏移量和纵向偏移量可以为负值，代表文字阴影向左偏移或向上偏移。文字阴影是可以叠加的，但是加很多层，会影响页面加载速度。添加多层阴影用“，”隔开。阴影叠加是先渲染前面的，再渲染后面的。
1．最简单的用法
text-shadow:2px 2px 4px #000;
此语法说明为一段文字设定横向偏移量为2px，纵向偏移量为2px，模糊距离为4px的黑色阴影。以下是一个单层阴影的例子。代码如下：
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，如图1所示：
图1 文字单层阴影
2．阴影叠加
text-shadow:2px 2px 0px red，2px 2px 4px green;
此语法说明为一段文字设定双层阴影。第一层为横向偏移量为2px，纵向偏移量为2px，模糊距离为0的红色阴影，第二层为横向偏移量为2px，纵向偏移量为2px，模糊距离为4px的绿色阴影。对于多层阴影，浏览器先渲染前面的阴影，再渲染后面的阴影。以下是一个双层阴影的例子。代码如下：
使用浏览器直接打开这个文件，就可以看到浏览器对这个网页文件解释后的结果，段落文字被加上了两层阴影，如图2所示。
图2 文字双层阴影
3．几个有趣的例子
（1）层叠：
将这段代码写在段落样式表中后在浏览器中运行，我们就可以看到蓝色层叠的文字效果，如图3所示。
图3 文字层叠效果
（2）光晕：
将这段代码写在段落样式表中后在浏览器中运行，我们就可以看到蓝色光晕的文字效果，如图4所示。
图4 文字光晕效果
（3）火焰文字：
将这段代码写在段落样式表中后在浏览器中运行，我们就可以看到蓝色光晕的文字效果，如图5所示。
图5 火焰文字效果
标签：ef6 例子 bsp tle bcb c4c 最简 文字 样式表
原文地址：https://www.cnblogs.com/itxdl/p/11839596.html
