text-shadow 文本阴影

发布时间：2023-03-15 11:13:00 所属栏目：教程来源：

导读：text-shadow 文本阴影
它可以给任意的字符设置一个或多个阴影。

1. 官方定义
text-shadow 属性向文本设置阴影。

2. 解释
text-shadow 一共接受 4 个参数，前两个是阴影的位置通过 x，y坐标系来设定，第三个

text-shadow 文本阴影
它可以给任意的字符设置一个或多个阴影。

1. 官方定义
text-shadow 属性向文本设置阴影。

2. 解释
text-shadow 一共接受 4 个参数，前两个是阴影的位置通过 x，y坐标系来设定，第三个参数设定模糊的大小，最后一个参数设定阴影的颜色。

3. 语法
.demo{
text-shadow: h-shadow v-shadow blur color;
}
属性值

值   说明
h-shadow   可选。水平方向阴影位置,以文字的中心为起点>0是往右，<0时候偏左。
v-shadow   可选。竖直方向阴影位置，用法同上。
blur   可选。模糊的大小。
color   可选。阴影的颜色
4. 兼容性
IE   Edge   Firefox   Chrome   Safari   Opera   ios   android
all   all   all   all   all   all   all   all
5. 实例
1.为文字添加阴影。

<div class="demo">网</div>
.demo{
text-shadow:px px px red;

为文字添加阴影效果图
制作一个文字发光效果。
html,body{
background: #000;
}
.demo{
color: #fff;
text-shadow:px px px #fff,-px -px px #fff,px -px px #fff,-px px px #fff;

制作一个文字发光效果效果图
说明：其实就是在各个方向上都增加一个白色的阴影，在黑色的背景下就显得有发光的效果了。

通过投影直至化制作一个3D的文字效果。
.demo{
font-size: px;
color: #fff;
text-shadow:px px hsl(,,),
px px hsl(,,),
px px hsl(,,),
px px hsl(,,),
px px hsl(,,),
px px px black;

制作一个3D的文字效果效果图
说明：这个效果也是利用各种色组叠加来实现的。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!