2020-12-18

阴影也分为盒子阴影和文字阴影，接下来请看如何使用
盒子阴影：box-shadow

盒子阴影有6个参数，其中有三个是必要的，分别是：

水平偏移量，正值向右，负值向左

垂直偏移量，正值向下，负值向上

阴影颜色

假如，写一个div，高度40，给向下的阴影，如下图：
在这里插入图片描述
从图中可以看出效果已经出来了

接下来是三个可选的参数，分别是：

模糊半径（可选）数值越大越模糊，0表示实心阴影

阴影尺寸（可选）数值越大尺寸越大

内/外阴影（可选） 外部：outset 内部：inset

我们再给这个div盒子，添加3个参数，让它有凹陷的感觉，如下图：

先添加内部阴影的属性
在这里插入图片描述
再添加模糊半径，让它可以模糊到大部分范围
在这里插入图片描述
最后添加阴影尺寸，让它的尺寸变大，加深感觉

在这里插入图片描述

这样就完成了，现在你已经了解盒子阴影的6个参数了。

它们的顺序是：
1:水平偏移量，正值向右，负值向左
2:垂直偏移量，正值向下，负值向上
3:模糊半径（可选）数值越大越模糊，0表示实心阴影
4:阴影尺寸（可选）数值越大尺寸越大
5:阴影颜色
6:内/外阴影（可选） 外部：outset 内部：inset
1
2
3
4
5
6
文字阴影：box-shadow

文字阴影只有4个参数，其中有三个是必要的，和盒子阴影相同，分别是：

水平偏移量，正值向右，负值向左

垂直偏移量，正值向下，负值向上

阴影颜色

假如，写一段文字，让它有重叠的效果，如下图：
在这里插入图片描述
重叠的效果已经出来了

接下来是最后一个可选的参数：

模糊半径（可选）

用模糊半径让他变成影子一样，效果图：
在这里插入图片描述
现在你也了解文字阴影的用法了

它们的顺序是：
1:水平偏移量
2:垂直偏移量
3:模糊半径（可选）
4:阴影颜色
1
2
3
4
你已经掌握了盒子阴影和文字阴影的用法了，可以做出炫酷的文字和层次感的排版了