前端必修技能：高手进阶核心知识分享 - CSS 阴影属性详解

CSS 涉及设计到阴影的相关内容包括三个方面：box-shadow属性（盒子阴影）、 text-shadow属性（文本阴影）、drop-shadow滤镜。 本篇文章旨在详细介绍和分析三种阴影的具体参数设置和典型用例。

box-shadow属性（盒子阴影）

向容器div添加阴影属性，box-shadow属性可以设置一个或多个下拉阴影的框。注意：box-shadow可以给同一个元素设置多个阴影效果，并用逗号进行分隔。

box-shadow属性（盒子阴影）语法

box-shadow: h-shadow v-shadow blur spread color inset;

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。 阴影向内扩散，否则阴影向外扩散。