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);
}