HTML5基础加强css样式篇（文字阴影css属性：text-shadow）(四十四)

最新推荐文章于 2024-08-17 23:58:49 发布

咸鸭蛋炒饭

最新推荐文章于 2024-08-17 23:58:49 发布

阅读量2.8k

点赞数 1

分类专栏： HTML5基础篇文章标签： css html5 经验 css3 函数

本文链接：https://blog.csdn.net/u010853130/article/details/69568967

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.文字阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            margin: 100px 0 0 100px;
            width: 200px;
            height: 200px;
            background-color: orange;

            color: #fff;
            font-weight: bold;
            font-size: 72px;
            font-family: "Microsoft YaHei UI", tahoma, Hiragino Sans GB, sans-serif;

            /*文本阴影*/
            text-shadow: 0 0 30px blue, 0 0 30px red;
        }

        .box:hover {

        }
    </style>
</head>
<body>

<div class="box">
    Hello
</div>

<script type="text/javascript">
</script>
</body>
</html>

2,.文字阴影应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            background-color: #000;
        }
        .box {
            margin: 100px 0 0 100px;
            width: 200px;
            height: 200px;
            /*background-color: orange;*/

            color: #fff;
            font-weight: bold;
            font-size: 72px;
            font-family: "Microsoft YaHei UI", tahoma, Hiragino Sans GB, sans-serif;


        }

        .box:hover {
            /*文本阴影*/
            text-shadow:
                    0 0 30px blue,
                    0 0 30px #fff,
                    0 0 80px blue,
                    0 0 80px #fff,
                    0 0 180px blue,
                    0 0 80px #fff;
                   transition: 2s;


        }
    </style>
</head>
<body>

<div class="box">
    Hello
</div>

<script type="text/javascript">
</script>
</body>
</html>

效果：