当前位置：首页 > JavaScript

js实现阴影层

2026-02-02 13:34:37JavaScript

使用CSS box-shadow属性

在JavaScript中动态添加阴影效果可以通过修改元素的style.boxShadow属性实现。该方法直接操作CSS属性，适用于简单阴影效果。

const element = document.getElementById('targetElement');
element.style.boxShadow = '10px 10px 5px rgba(0,0,0,0.5)';

参数说明：

前两个值控制阴影偏移（X轴和Y轴）
第三个值控制模糊半径
第四个值控制阴影颜色和透明度

通过类名切换实现阴影

定义CSS类包含阴影样式，通过JavaScript切换类名实现阴影效果。

js实现阴影层

.shadow-effect {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

document.getElementById('targetElement').classList.add('shadow-effect');

创建自定义阴影层元素

对于需要独立控制的复杂阴影效果，可以创建专门的阴影层元素。

function createShadowLayer(target) {
  const shadow = document.createElement('div');
  shadow.style.position = 'absolute';
  shadow.style.width = '100%';
  shadow.style.height = '100%';
  shadow.style.boxShadow = 'inset 0 0 10px #000';
  shadow.style.pointerEvents = 'none';
  target.style.position = 'relative';
  target.appendChild(shadow);
}

使用Canvas绘制高级阴影

需要更复杂的阴影效果时，可以使用Canvas API绘制。

js实现阴影层

const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = '#ffffff';
ctx.fillRect(30, 30, 100, 100);
document.body.appendChild(canvas);

响应式阴影效果

结合事件监听实现交互式阴影效果。

const element = document.getElementById('interactiveElement');
element.addEventListener('mousemove', (e) => {
  const x = e.offsetX / element.offsetWidth * 20;
  const y = e.offsetY / element.offsetHeight * 20;
  element.style.boxShadow = `${x}px ${y}px 10px rgba(0,0,0,0.3)`;
});

多阴影叠加效果

通过逗号分隔实现多重阴影效果。

const element = document.getElementById('multiShadowElement');
element.style.boxShadow = `
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.24)
`;