您的位置：首页 > Web前端 > CSS

CSS3之文本凹凸效果（阴影效果）

2018-06-21 16:44 211 查看

背景

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

凹效果

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>

效果图如下

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航