背景
利用文本的阴影效果，可以实现文本的凹凸效果，使得文本更加有立体感
凹效果
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
黑色衬托白色
凸效果
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
白色衬黑色
完整代码如下
<!DOCTYPE html>
<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>效果图如下
