CSS3凹凸文字效果

最新推荐文章于 2024-07-22 18:43:53 发布

m0_63634307

最新推荐文章于 2024-07-22 18:43:53 发布

阅读量209

点赞数 3

分类专栏： CSS3 文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/m0_63634307/article/details/140616591

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文字阴影：text-shadow: h-shadow v-shadow blur color 水平偏移量垂直偏移量模糊度颜色

1、水平偏移量正值向右负值向左；

2、垂直偏移量正值向下负值向上；

3、模糊度是不能为负值，值越大越模糊)

4、颜色(可以设置透明度，文字要设置在最后），同一个文字可以有多个阴影，中间用,隔开。

效果图

代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
        }
        p {
            font-size: 50px;
            text-align: center;
            color: pink;
            font-weight: 700;
        }
        .a {
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;/*凹陷效果*/
        }

        .b {
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;/*凸起效果*/
        }
    </style>
</head>

<body>
    <p class="a">苍茫的天涯是我的爱</p>
    <p class="b">连绵的青山脚下花正开</p>
</body>

</html>