使用text-shadow:实现凹凸文字

使用text-shadow实现凹凸文字

那么先在body创建两个div,用来存放凹、凸文字

<div>窝是凸文字</div>
<div>窝是凹文字</div>

以下为css样式：
然后为body添加背景颜色#ccc(灰色)，div的的文字样式是：颜色#ccc和背景色一致，宽度100px，字体大小100px，微软雅黑

body{
	background-color:#ccc;
}
div{
	color:#ccc;
	font: 100 100px "微软雅黑"；
}

凸文字的css样式：上阴影为白色#fff，下阴影为黑色#000

div:first-child{
	text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;
}

凹文字的css样式：上阴影为黑色#000，下阴影为白色#fff

div:last-child{
	text-shadow:-1px -1px 1px #000,1px 1px 1px #fff;
}

效果如下