text-shadow好看特效代码展示

吴迪98

于 2020-03-20 22:25:20 发布

阅读量2w

点赞数 3

分类专栏： HTML与CSS专栏文章标签： text-shadow text-shadow效果 text-shadow好看效果 text-shadow详细介绍 css好看样式

本文链接：https://blog.csdn.net/weixin_43606158/article/details/105000185

版权

HTML与CSS专栏专栏收录该内容

29 篇文章 11 订阅

订阅专栏

文章目录

一：全部效果展示：

在这里插入图片描述

二：代码展示：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            background: #000;
            text-align: center;
            font-weight: bold;
            font-size: 40px;
            font-family: arial, sans-serif;
            height: 80px;
            line-height: 80px;
            color: brown;
        }
        p {
            background: #999;
            text-align: center;
        }
        #fire {
            text-shadow: 0 0 4px white,
            0 -5px 4px #ff3,
            2px -10px 6px #fd3,
            -2px -15px 11px #f80,
            2px -25px 18px #f20;
        }
        #effect2 {
            color: #fff;
            background: #666;
            text-shadow: #000000 0.1em 0.1em 0.2em;
        }
        #effect3 {
            background: #fff;
            text-shadow: 0.2em 0.5em 0.1em #600,
            -0.3em 0.1em 0.1em #060,
            0.4em -0.3em 0.1em #006;
        }
        #effect4 {
            color: #d1d1d1;
            text-shadow: -1px -1px white,
        1px 1px #333;
        }
        #effect5 {
            color: #d1d1d1;
            text-shadow: 1px 1px white,
            -1px -1px #333;
        }
        #effect6 {
            text-shadow: -1px 0 white,
        0 1px white,
        1px 0 white,
        0 -1px white;
        }
        #effect7 {
            color: #d1d1d1;
            background: #ccc;
            text-shadow: 0 0 0.2em #F87,
        0 0 0.2em #F87;
        }
    </style>
</head>
<body>
    <p>效果：1，火焰效果🔥</p>
    <div id="fire">吴小迪</div>
    <p>效果：2，增加前背景色后背景色</p>
    <div id="effect2">吴小迪</div>
    <p>效果：3，定义多色阴影</p>
    <div id="effect3">吴小迪</div>
    <p>效果：4，定义立体突出文字</p>
    <div id="effect4">吴小迪</div>
    <p>效果：5，定义立体凹入文字</p>
    <div id="effect5">吴小迪</div>
    <p>效果：6，定义描边文字</p>
    <div id="effect6">吴小迪</div>
    <p>效果：7，定义外发光文字</p>
    <div id="effect7">吴小迪</div>
</body>
</html>

三：代码说明：

文本阴影的参数如下：

参数	描述	吴迪自己的理解
h-shadow	必需的，水平阴影的位置，可以负值	控制影子的x轴位置,正值则是在右边，负值在左边
v-shadow	必需的，垂直阴影的位置，可以负值	控制影子的y轴位置，正值则是在下面，负值在上面
blur	可选，模糊距离	控制影子的模糊度
color	可选，阴影颜色	控制影子的颜色