可通过CSS的box-shadow属性为HTML元素添加背景阴影，支持基础阴影、多层阴影、内阴影、伪元素模拟复杂阴影及filter: drop-shadow()替代方案。
如果您希望为HTML元素添加背景阴影效果，可以通过CSS的box-shadow属性实现。以下是多种不同的实现方法：
一、使用box-shadow基础语法
box-shadow属性允许在元素周围绘制一个或多个阴影，支持设置水平偏移、垂直偏移、模糊半径、扩展半径和颜色。该方法适用于块级元素和行内元素（需设置display为inline-block或block）。
1、在HTML中为需要添加阴影的元素添加class，例如：class="shadow-box"。
2、在CSS中定义该class，写入box-shadow属性，如：box-shadow: 2px 2px 5px rgba(0,0,0,0.3);。
立即学习“前端免费学习笔记（深入）”；
3、其中参数依次为：水平偏移量、垂直偏移量、模糊半径、颜色；省略扩展半径时默认为0。
二、添加多层阴影效果
box-shadow支持逗号分隔的多个阴影值，可叠加不同方向与强度的阴影以增强立体感，适用于按钮、卡片等强调视觉层级的场景。
1、在CSS中为同一元素设置多个阴影，用英文逗号分隔，例如：box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1);。
2、第一个阴影靠近元素底部，第二个阴影更深更扩散，形成层次分明的投影。
3、注意各阴影参数之间不可换行，必须在同一行CSS声明中以逗号连接。
三、实现内阴影效果
通过添加inset关键字，可使阴影向内投射，常用于模拟凹陷、按压或容器内嵌视觉效果，如输入框聚焦态或模态框背景。
1、在box-shadow值最前端添加inset关键字，例如：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);。
2、此时阴影将从元素边框向内部渲染，不占用外部布局空间。
3、inset可与外阴影共存，只需在同一个box-shadow声明中用逗号分隔，如：box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.15);。
四、配合伪元素模拟复杂阴影
当box-shadow无法满足特定形状（如不规则边缘、渐变扩散）阴影需求时，可利用::before或::after伪元素生成绝对定位的阴影层，并通过transform和filter控制形态。
1、为元素设置position: relative;，确保伪元素能相对于其定位。
2、在CSS中定义::before伪元素，设置content: "";、position: absolute;、宽高与主元素一致，并应用filter: blur(12px);和深色背景。
3、通过transform: translateZ(-1px);或负top/left偏移模拟阴影深度，再用z-index置于主元素下方。
五、使用filter: drop-shadow()替代方案
drop-shadow()是filter函数之一，与box-shadow不同，它基于元素的实际Alpha通道（如图片透明区域、SVG路径）生成阴影，适合非矩形内容。
1、直接对img、svg或含透明背景的PNG元素应用：filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.3));。
2、该函数三个参数分别为水平偏移、垂直偏移、模糊半径，不支持扩展半径与inset。
3、注意drop-shadow()会作用于整个渲染树，可能影响性能，避免在大量滚动元素上高频使用。
