js实现阴影层
使用CSS box-shadow属性
在HTML元素上直接添加CSS的box-shadow属性是最简单的方法。该属性支持设置阴影的偏移、模糊半径、扩散范围和颜色。
.shadow-element {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}参数说明：
- 第一个值：水平偏移量（正值向右）
- 第二个值：垂直偏移量（正值向下）
- 第三个值：模糊半径（值越大越模糊）
- 第四个值：扩散范围（可选，正值扩大阴影）
- 第五个值：阴影颜色（支持RGBA透明度）
动态修改阴影样式
通过JavaScript动态修改元素的阴影效果，可以响应交互事件。
const element = document.querySelector('.shadow-element');
element.style.boxShadow = '0 0 20px 5px rgba(255,0,0,0.5)';创建投影滤镜效果
使用CSS的filter属性配合drop-shadow()函数，可以为非矩形元素（如透明PNG）创建更自然的阴影。
element.style.filter = 'drop-shadow(5px 5px 10px black)';多层阴影叠加
通过逗号分隔多个box-shadow值，可以实现多层阴影叠加效果。
element.style.boxShadow =
'0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)';使用Canvas绘制阴影
对于Canvas绘制的图形，可以通过设置阴影属性实现更复杂的阴影效果。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(20, 20, 100, 100);SVG阴影效果
在SVG元素中，可以使用filter元素配合feGaussianBlur等滤镜原语创建阴影。
<svg>
<defs>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode in="offsetblur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="100" height="100" filter="url(#shadow)"/>
</svg>性能优化建议
频繁修改阴影属性可能引发重绘影响性能。对于动画场景，考虑使用transform属性代替直接修改阴影参数，或使用will-change属性提示浏览器优化。
.animated-shadow {
will-change: box-shadow;
transition: box-shadow 0.3s ease;
}
