text-shadow写艺术字

最新推荐文章于 2023-08-10 10:10:55 发布

原创最新推荐文章于 2023-08-10 10:10:55 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种使用HTML和CSS创建艺术字效果的方法。通过精心设置text-shadow属性，实现了文字从浅到深的渐变阴影效果，使普通的文本呈现出立体感极强的艺术字。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .art span {
            /* 控制字体大小 */
            font-size: 200px;
            /*字体的颜色*/
            color: rgb(247, 181, 60);
            /*这是核心代码，主要是利用阴影*/
            /*第一个值：水平阴影的位置，正值向右，负值向左，
            第二个值：垂直阴影的位置
            第三个值：模糊的距离
            第四个值：阴影颜色*/
            /*主要是利用阴影不断重叠，就能写出我们的艺术字了
            第一个颜色用白色效果会更好，可以自己试一下区别。
            */
            text-shadow: -1px 1px 1px white, 
                         -3px 1px 1px rgb(231, 173, 56),
                         -5px 1px 1px rgb(224, 159, 53),
                         -7px 1px 1px rgb(221, 163, 54), 
                         -9px 1px 1px rgb(215, 155, 53), 
                         -11px 1px 1px rgb(211, 167, 55), 
                         -13px 1px 1px rgb(221, 163, 54),
                         -15px 1px 1px rgb(219, 161, 54),
                         -17px 1px 1px rgb(212, 157, 54),
                         -19px 1px 1px rgb(207, 152, 50), 
                         -21px 1px 1px rgb(197, 145, 48), 
                         -23px 1px 1px rgb(202, 149, 49),
                         -25px 1px 1px rgb(196, 142, 42);
        }
    </style>
</head>

<body>
    <div class="art">
        <span>J</span>
        <span>o</span>
        <span>k</span>
        <span>e</span>
        <span>r</span>
    </div>
</body>

</html>
   