背景
利用文本的陰影效果，可以實現文本的凹凸效果，使得文本更加有立體感
凹效果
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>效果圖如下
