用css体现文字的凹凸(浮雕)效果
要做出这个效果,首先必须知道css的一个属性:
text-shadow:水平位置 垂直距离 模糊距离 阴影颜色;
水平位置和垂直位置的值可以为负值
-
可以使用两组值来实现凹凸效果,中间用逗号“,”隔开
<style> body { background: #ccc; /*设置整体的背景颜色为灰色*/ } div { font-size: 80px; /*设置字体的大小*/ color: #ccc; /*设置字体的颜色为灰色*/ } div:first-child { /*表示选择父元素的第一个子元素*/ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } div:last-child { /*表示选择父元素的最后一个子元素*/ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> --------------------------------------------------------------- <div>我是凸起的文字</div> <div>我是凹下去的文字</div>
效果展示: