阴影text-shadow和box-shadow详解

text-shadow

基础知识

text-shadow: 水平位移 垂直位移 模糊程度(越大越模糊) 颜色

所以这个阴影效果可以理解为复制一下内容，并且偏移一下位置。并不是拉伸的那种阴影，当位移距离长的时候，也是有间隙的

多个阴影

多个阴影效果用逗号隔开

进阶

先看效果，讲解同理下面的 box-shadow进阶-内嵌

box-shadow

基础

基本的还是和text-shadow一样

单边效果

进阶-外延

先看效果

这就是并没有偏移，而是在每一边的大小基础上都加上了相同的模糊度

0px 0px 20px 10px black 意思是 不是偏移的阴影效果，而是在每个边上加上长度为10px的阴影效果，阴影程度为20px。阴影长度可以不加，默认就是0px(也有一定的阴影长度如：0px 0px 20px black)

进阶-内嵌

先看效果，此效果在text-shadow应该不行，我尝试了并没有效果

5px 20px 10px inset #ccc：相当于 x往里偏移5px，y往里偏移20px，模糊程度10px(不写的话默认0px即实心不模糊)，inset就是定义为内嵌(默认不写的话是外延的类型)，#ccc为颜色