css凹凸文字简单设置

来源:互联网 发布:图像高斯滤波算法编程 编辑:程序博客网 时间:2024/05/17 18:03
<!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>
原创粉丝点击