CSS3之文本凹凸效果(阴影效果)

背景

利用文本的阴影效果,可以实现文本的凹凸效果,使得文本更加有立体感


凹效果

text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
黑色衬托白色

凸效果

text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
白色衬黑色

完整代码如下



<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        body{

            background-color: #666;
        }

        p{
            font-size:120px;
            text-align: center;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            color:#666;
        }
        /* text-shadow :文字阴影
            可以设置多个阴影
           每个阴影之间使用逗号隔开
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
         */
        .tu{
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }

        .ao{
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
    style>
head>
<body>
    <p class="ao">我爱你,中国p>
    <p class="tu">我爱你,中国p>
body>
html>

效果图如下

CSS3之文本凹凸效果(阴影效果)_第1张图片

你可能感兴趣的:(CSS3,CSS3)