1️⃣前言

今天的笔记的内容是：

• 盒子阴影

---

2️⃣内容

🌱属性与值

在CSS中，新增了盒子阴影。我们可以使用box-shadow属性，为盒子添加阴影效果。

语法如下：

box-shadow: [inset] x-length y-length [blur] [spread] [color];

属性值	含义	是否为必需值
offset-x	阴影水平偏移值，可以是负值	是
offset-y	阴影垂直偏移值，可以是负值	是
blur	阴影的模糊值（阴影距离）	否
spread	阴影的扩散半径（阴影尺寸）	否
color	设置阴影颜色	否
inset	设置为内阴影（默认阴影是向外的）	否

🌳记录

box-shadow属性对于不同的取值，解释是不同的。下面是各个效果的记录。

一、 offset-x 和 offset-y

• offset-x表示水平阴影的偏移距离，取值为正则阴影位于盒子右边，负值则阴影位于盒子左边。
• offset-y表示垂直阴影的偏移距离，取值为正则阴影位于盒子下方，负值则阴影在盒子的上方。

举个例子：

div {
    box-shadow: 15px 5px;
}

效果：

在box-shadow属性的取值中，有两个值必须给。即offset-x和offset-y。

在上述例子中，盒子的阴影水平偏移15px，垂直偏移5px。效果很明显。

---

二、blur

如果box-shadow属性有三个长度值，那么第三个值就代表blur值，也就是模糊半径（或者说模糊距离）。

该值默认为0，边缘锐利。blur值越大，模糊面积越大，阴影就越大（且颜色越淡）。需要注意，该值不能是负值。

示意图如下：

三、spread

这是第四个长度<length>值。spread值代表阴影的尺寸，也就是阴影扩散半径。取正值时表示阴影扩大；取负值时，阴影收缩（也就是无阴影）。

该值属于可选项，默认值为0，此时阴影与元素同样大。

下面是示意图：

四、color

盒子的阴影可以是可以设置颜色值的。如果没有指定颜色，那么默认由浏览器决定。

五、inset

默认情况下，盒子的阴影是在边框外边的，也就是阴影向外扩散。但是如果设置了inset关键字，那么阴影就会向盒子内部扩散，也就是在盒子边框内，背景之上，内容之下。

举个例子：

div {
    padding: 0 2em;
    box-shadow: inset 0 -2em 2em rgba(0,0,0,0.1);
}

效果如下：

---

3️⃣写在最后

最后提一句，盒子阴影box-shadow可以设定多组效果，每组参数值以逗号分隔。

好了，今天的笔记就记到这里。