6.文字阴影

最新推荐文章于 2024-06-24 14:04:15 发布

这一片月

最新推荐文章于 2024-06-24 14:04:15 发布

阅读量130

点赞数

分类专栏： css样式文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_62865634/article/details/127902197

版权

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：在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>