css凹凸文字--text-shadow

小薯片子

已于 2022-01-27 11:06:45 修改

阅读量2.2k

点赞数

分类专栏： css 文章标签： css html javascript

于 2017-11-10 18:23:25 首次发布

本文链接：https://blog.csdn.net/luobo2345/article/details/78502338

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css3新增属性： text-shadow

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

具体实现方法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #ccc;
        }
        div{
            color: #ccc;
            font: 700 80px "微软雅黑";
            
        }
        div:first-child {
            text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;  /*凸*/
        }
        div:nth-child(2) {
            text-shadow: -1px -1px 1px #000,-1px -1px 1px #fff; /* 凹*/
        }
        </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>
</html>