凸起凹下文字效果

最新推荐文章于 2021-03-22 10:00:48 发布

weixin_34378969

最新推荐文章于 2021-03-22 10:00:48 发布

阅读量240

点赞数

文章标签：游戏

原文链接：https://juejin.im/post/5cfb23866fb9a07ea33c0799

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			margin: 0;
			background-color: #999;
		}
		div {
			text-align: center;
			font-size: 50px;
			color: #999;
		}
		.up {
			text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
		}
		.down {
			text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
		}
	</style>
</head>
<body>
	<div class="up">凸起文字</div>
	<div class="down">凹下文字</div>
</body>
</html>复制代码

效果：