目录
- 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为颜色