qinyi素材网
当前位置: 首页 > WEB教程 > CSS实现字体凹陷与凸出效果

CSS实现字体凹陷与凸出效果

  时间: 2021-11-11   阅读:2.13k
简要教程

本文的CSS效果主要是使用了text-shadow文本阴影效果,text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

使用方法

在HTML的head标签中先引入关键的css样式

    <style>
        body {
            background: gray;
        }

        .class1 {
            font-size: 200px;
            color: gray;
            text-shadow: 3px 3px 2px black,
            -3px -3px 2px white;
        }

        .class2 {
            font-size: 200px;
            color: gray;
            text-shadow: 3px 3px 2px white,
            -3px -3px 2px black;
        }

    </style>

HTML结构

<body>
<div class="demo">
</div>
<h1 class="class1">
    我是凸出效果
</h1>
<h1 class="class2">
    我是凹陷效果
</h1>
</body>

效果展示

上一篇: 下一篇: