提示:在css3中,我们可使用text-shadow属性将阴影应用于文本。
1、语法:
div{
text-shadow:“h-shadow v-shadow blur color”;
}
解释:
h-shadow x轴——数值越大向右边,数值越小向右边包括负数。
v-shadow y轴——数值越大向下边,数值越小向上边包括负数。
blur 阴影——数值越大越模糊或者虚,数值越小越清晰或者实体。
color 颜色——阴影色彩,可以加rgba (0,0,0,0)透明度为0-1之间。
自己代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字阴影、结合透明来使用</title>
<style>
div {
font-size: 70px;
color: coral;
font-weight: 700;
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.2);
/* 这个表示字体阴影:
第一个5px :表示阴影字体x轴移动、数值越大向右边、数值越小向左边(包括负数)
第二个5px :表示阴影字体y轴移动、数值越大向下边、数值越小向上边(包括负数)
第三个6px :表示字体清晰与模糊、阴影清晰、模糊,数值越大字体阴影越模糊、数值越小字体阴影越清晰
第四个颜色:我们可以结合前面background-rgba使用(0,0,0,0.2)
这四个数值分别是:
第一个0:表示红色
第二个0:表示绿色
第三个0:表示蓝色
第四个0.2:表示透明度、这个透明度值我们通常是0~1之间、当然这个设置到这来可以让我们字体阴影也有透明效果 */
}
</style>
</head>
<body>
<div>你是阴影,我是火影</div>
</body>
</html>
显示结果:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了text-shadow属性将阴影应用于文本。