
关键是text-shadow这个属性
总共有四个参数,分别是水平位置、 垂直位置 、模糊距离 、阴影颜色
text-shadow: 2px 2px 1px #000, -2px -2px 1px #fff;
表示先水平向右,垂直向下偏移2px的 #000颜色的阴影,再水平向左,垂直向上做一个1px的#fff颜色的阴影效果,注意都是基于原有的div的位置进行的操作。而最终的实现效果也是一个叠加的显示效果,进而呈现出立体感。

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