文字如何实现凹凸效果

关键是text-shadow这个属性
总共有四个参数,分别是水平位置、 垂直位置 、模糊距离 、阴影颜色

text-shadow: 2px 2px 1px #000, -2px -2px 1px #fff;

表示先水平向右,垂直向下偏移2px的 #000颜色的阴影,再水平向左,垂直向上做一个1px的#fff颜色的阴影效果,注意都是基于原有的div的位置进行的操作。而最终的实现效果也是一个叠加的显示效果,进而呈现出立体感。

方向的说明

大家在进行开发时,使用阴影效果有时会起到意想不到的效果,提升网站的炫酷性哦。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容