©2016-2024 Matools All rights reserved,
粤ICP备17059708号
背景
利用文本的阴影效果，可以实现文本的凹凸效果，使得文本更加有立体感
凹效果
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>
效果图如下
热门工具 换一换