可通过box-shadow为块级元素添加外/内/多重阴影，text-shadow为文本添加单/多向阴影或描边效果，filter的drop-shadow()则适配复杂形状且跟随轮廓。
如果您希望为HTML5中的元素添加视觉层次感，可以通过CSS的box-shadow属性为块级元素添加外阴影，或使用text-shadow属性为文本内容添加文字阴影。以下是具体实现方法：
一、使用box-shadow为元素添加外阴影
box-shadow属性用于在元素边框外部绘制阴影效果，支持设置水平偏移、垂直偏移、模糊半径、扩展半径以及阴影颜色，可叠加多个阴影值。
1、在CSS样式中选中目标元素，例如
2、编写基础语法：box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色；其中后三项为可选。
立即学习“前端免费学习笔记（深入）”；
3、示例代码：.card { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.15); }，表示向右下偏移2像素、模糊8像素、无扩展、半透明黑色阴影。
4、如需内阴影，可在参数前添加inset关键字：box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);。
5、如需多重阴影，用逗号分隔多组参数：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);。
二、使用text-shadow为文字添加阴影
text-shadow属性专门用于为文本内容添加阴影，适用于标题、按钮文字等需要突出显示的文本节点，不作用于元素背景或边框。
1、在CSS中定位目标文本元素，例如h1、.title或span.text。
2、书写text-shadow语法：text-shadow: 水平偏移 垂直偏移 模糊半径 颜色；前三项为必填，颜色为可选（默认为当前文字颜色）。
3、基础示例：h1 { text-shadow: 1px 1px 2px #999; }，生成向右下轻微偏移、带轻微模糊的灰色阴影。
4、实现描边效果：使用多个相同偏移但不同方向的阴影，例如text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;。
5、配合transparent颜色可创建“浮雕”或“凹陷”效果，如text-shadow: 0 1px 0 transparent, 0 -1px 0 transparent;。
三、通过filter属性添加阴影（替代方案）
filter属性中的drop-shadow()函数提供与box-shadow相似但基于图像渲染的阴影效果，能正确跟随元素轮廓（包括圆角、透明区域），适用于复杂形状元素。
1、在CSS中为目标元素添加filter声明，注意该属性会影响整个元素渲染层。
2、使用drop-shadow()函数：filter: drop-shadow(水平偏移 垂直偏移 模糊半径 颜色);，参数顺序与box-shadow一致，但不支持扩展半径和inset。
3、示例：img { filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.2)); }，适用于带透明背景的PNG图标。
4、可与其他filter函数组合使用，如filter: drop-shadow(...) brightness(1.1);，但需注意性能开销。
5、注意浏览器兼容性：IE完全不支持filter，旧版Safari需-webkit-filter前缀。
