js实现阴影层
使用 CSS box-shadow 属性实现阴影层
通过 CSS 的 box-shadow 属性可以轻松为元素添加阴影效果。在 JavaScript 中动态设置该属性：
const element = document.getElementById('targetElement');
element.style.boxShadow = '2px 2px 10px rgba(0, 0, 0, 0.3)';参数说明：
- 前两个值控制阴影偏移（水平/垂直）
- 第三个值控制模糊半径
- 最后一个值控制颜色和透明度
创建独立阴影层元素
如需更复杂的阴影效果，可创建独立的阴影层元素：
const shadowLayer = document.createElement('div');
shadowLayer.style.position = 'fixed';
shadowLayer.style.top = '0';
shadowLayer.style.left = '0';
shadowLayer.style.width = '100%';
shadowLayer.style.height = '100%';
shadowLayer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
shadowLayer.style.zIndex = '999';
document.body.appendChild(shadowLayer);使用 Canvas 绘制高级阴影
对于需要特殊形状的阴影，可使用 Canvas API：
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = '#fff';
ctx.fillRect(30, 30, 100, 100);使用 CSS 滤镜实现阴影
CSS 的 filter 属性提供另一种阴影实现方式：
const element = document.querySelector('.shadow-element');
element.style.filter = 'drop-shadow(4px 4px 8px rgba(0,0,0,0.5))';动态调整阴影参数
通过 JavaScript 可以动态调整阴影参数实现交互效果：
let blurLevel = 0;
const element = document.getElementById('interactive-shadow');
function updateShadow() {
blurLevel += 1;
element.style.boxShadow = `0 0 ${blurLevel}px rgba(0,0,0,0.5)`;
if(blurLevel < 20) requestAnimationFrame(updateShadow);
}
updateShadow();移除阴影层
移除阴影层或阴影效果的方法：
// 移除box-shadow
element.style.boxShadow = 'none';
// 移除独立阴影层
if(shadowLayer.parentNode) {
shadowLayer.parentNode.removeChild(shadowLayer);
}
