文本阴影和盒子阴影

文章由自己的学习历程总结而来，仅供大家参考，欢迎大家交流学习。
今天学习一个有趣的css属性——阴影，阴影分为文本阴影和盒子阴影

文本阴影：text-shadow

text-shadow是专门用来给文字添加阴影效果的属性
像这样的带有阴影效果的文字，就是通过文本阴影来实现的
语法 text-shadow：text-shadow:水平位置，垂直位置，模糊度，阴影颜色
其中：
1.水平位置(左正右负)和垂直位置(下正上负)，是用来设置阴影显示的方向
2.模糊度是用来调节阴影的模糊程度,也用像素来设置,像素越高越模糊不清
3.阴影颜色可以自由选择

为了有更好的阴影效果,可以进行多次设置,中间用逗号隔开

text-shadow: 3px -2px 2px rgb(11, 191, 243),3px -3px 4px rgb(140, 191, 243),3px -7px 7px rgb(140, 159, 190);

盒子阴影：box-shadow

box-shadow是用来给盒子div等添加阴影效果的属性

语法 box-shadow:水平位置，垂直位置，模糊度，阴影大小(可选)，阴影颜色，inset(内阴影)
盒子阴影的属性比较多
其中：
1.水平位置(左正右负)和垂直位置(下正上负)，是用来设置阴影显示的方向
2.模糊度是用来调节阴影的模糊程度,也用像素来设置,像素越高越模糊不清
3.阴影大小
4.阴影颜色
5.内阴影。从外层的阴影（开始时）改变阴影内侧阴影

为了有更好的阴影效果,可以进行多次设置,中间用逗号隔开

box-shadow: 5px 0px 0px grey inset,-5px 0px 0px grey inset,0px 5px 0px grey inset,0px -5px 0px grey inset;

我们可以用盒子阴影和过渡做一些类似于悬浮效果的动态图，等我们学习完过渡之后，带大家一起做。