当前位置：首页 > JavaScript

js实现阴影

2026-02-02 03:08:52JavaScript

使用 box-shadow 属性

在 CSS 中，box-shadow 是最常用的阴影实现方式。通过 JavaScript 动态设置元素的 box-shadow 属性，可以实现阴影效果。

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

参数说明：

水平偏移（2px）：阴影向右偏移的距离。
垂直偏移（2px）：阴影向下偏移的距离。
模糊半径（10px）：阴影的模糊程度。
颜色（rgba(0, 0, 0, 0.5)）：阴影的颜色和透明度。

使用 text-shadow 属性

对于文本阴影，可以使用 text-shadow 属性。通过 JavaScript 动态设置文本的阴影效果。

const textElement = document.getElementById('myText');
textElement.style.textShadow = '1px 1px 3px #000000';

参数说明：

js实现阴影

水平偏移（1px）：阴影向右偏移的距离。
垂直偏移（1px）：阴影向下偏移的距离。
模糊半径（3px）：阴影的模糊程度。
颜色（#000000）：阴影的颜色。

使用 Canvas 绘制阴影

在 Canvas 中，可以通过设置 shadowBlur、shadowColor、shadowOffsetX 和 shadowOffsetY 属性来实现阴影效果。

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

参数说明：

js实现阴影

shadowColor：阴影的颜色。
shadowBlur：阴影的模糊程度。
shadowOffsetX 和 shadowOffsetY：阴影的偏移距离。

使用 SVG 实现阴影

在 SVG 中，可以通过 filter 和 feGaussianBlur 元素实现阴影效果。

const svg = document.getElementById('mySvg');
const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
filter.setAttribute('id', 'shadow');
const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
feGaussianBlur.setAttribute('in', 'SourceAlpha');
feGaussianBlur.setAttribute('stdDeviation', '2');
filter.appendChild(feGaussianBlur);
svg.appendChild(filter);

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '20');
rect.setAttribute('y', '20');
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
rect.setAttribute('filter', 'url(#shadow)');
svg.appendChild(rect);

使用 CSS 变量动态控制阴影

通过 CSS 变量和 JavaScript 结合，可以动态调整阴影效果。

<style>
  :root {
    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-offset: 2px;
    --shadow-blur: 10px;
  }
  .shadow-box {
    box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);
  }
</style>

<script>
  document.documentElement.style.setProperty('--shadow-color', 'rgba(255, 0, 0, 0.5)');
  document.documentElement.style.setProperty('--shadow-offset', '5px');
  document.documentElement.style.setProperty('--shadow-blur', '15px');
</script>

使用第三方库

如果需要更复杂的阴影效果，可以使用第三方库如 anime.js 或 GSAP 来实现动画阴影。

import anime from 'animejs';

anime({
  targets: '.shadow-box',
  boxShadow: ['0 0 0 rgba(0,0,0,0)', '10px 10px 20px rgba(0,0,0,0.5)'],
  duration: 1000,
  easing: 'easeInOutQuad'
});