text-shadow使用

在这里插入图片描述
 <style>
        html{
            background-color: #cccccc;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }
        .one{
            color: #edeadf;
        text-shadow:
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111,
                1px 1px 5px #111111;
        }

        .two{
            color: #efefef;
            text-shadow: 0 0 4px #a3ecf1,0 0 4px #c0ecf1;
        }
        .three{
            color: red;
            text-shadow:0 1px 1px rgba(255,255,255,1),
            0 -2px 2px rgba(0,0,0,.4);
        }
        .four{
            color: black;
        ;
        }
        .five{
            color: #727d8f;
            text-shadow:0 1px 1px rgba(255,255,255,1),
            0 1px 1px rgba(255,255,255,1),
            0 -2px 2px rgba(0,0,0,.4),
            0 1px 1px rgba(255,255,255,1),
            0 -2px 2px rgba(0,0,0,.4),
            0 1px 1px rgba(255,255,255,1),
            0 -2px 2px rgba(0,0,0,.4),
            0 -2px 2px rgba(0,0,0,.4)
        ;
        }
        .box{
            width: 100%;
            font-size: 31px;
            color: white;
            position: relative;
            top: -175px;
            z-index:-1;
        }
    </style>
</head>
<body>
<hr>
<p class="one">Hongbin</p>
<hr>
<p class="two">Hello World</p>
<hr>
<p class="three">Software engineer</p>
<hr>
<p class="four">Development</p>
<hr>
<p class="five">Last test</p>
<div class="box">
    Development
</div>
</body>
Hello Hongbin
发布了68 篇原创文章 · 获赞 89 · 访问量 1万+
私信关注
猜你喜欢
