凹凸文字效果

原创于 2019-07-25 17:46:23 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#凹凸文字效果

基础专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一种使用CSS实现特殊文字效果的方法，通过调整背景色和字体颜色，再利用阴影属性，创造出凸文字和凹文字的视觉效果。文章详细展示了如何通过简单的CSS样式达到这种效果，适合前端开发者学习。

注意：将背景颜色调成与字体颜色一样

<style type="text/css">
		body {
			background-color: #ccc
		}
		div {
			color: #ccc;
			font: 700 60px "微软雅黑";
		}
		div:first-child {
			text-shadow: 1px 1px 1px #000, -1px -1px #fff;    /*下黑上亮*/
		}
		div:last-child {
			text-shadow: -1px -1px 1px #000, 1px 1px #fff;    /*下亮上黑*/
		}
	</style>

<body>
	<div>凸文字</div>
	<div>凹文字</div>
</body>