js实现阴影

使用 box-shadow 属性

通过 CSS 的 box-shadow 属性可以为元素添加阴影效果。

.box {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

• 参数说明：
  • 前两个值（10px 10px）表示阴影的水平和垂直偏移。
  • 第三个值（5px）表示阴影的模糊半径。
  • 最后一个值（rgba(0, 0, 0, 0.3)）表示阴影的颜色和透明度。

使用 text-shadow 属性

为文本添加阴影效果，可以通过 text-shadow 实现。

.text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

• 参数说明：
  • 前两个值（2px 2px）表示阴影的水平和垂直偏移。
  • 第三个值（4px）表示模糊半径。
  • 最后一个值（rgba(0, 0, 0, 0.5)）表示阴影颜色和透明度。

使用 Canvas 绘制阴影

在 Canvas 中可以通过 shadowOffsetX、shadowOffsetY、shadowBlur 和 shadowColor 属性绘制阴影。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 100, 100);

使用 SVG 实现阴影

在 SVG 中可以通过 <filter> 和 <feDropShadow> 元素实现阴影效果。

<svg width="200" height="200">
  <filter id="shadow">
    <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="rgba(0, 0, 0, 0.5)"/>
  </filter>
  <rect x="20" y="20" width="100" height="100" fill="blue" filter="url(#shadow)"/>
</svg>

动态调整阴影（JavaScript 控制）

通过 JavaScript 动态修改元素的阴影属性。

const element = document.querySelector('.box');
element.style.boxShadow = '5px 5px 10px rgba(0, 0, 0, 0.4)';

可以结合事件（如鼠标悬停）动态调整阴影。

element.addEventListener('mouseover', () => {
  element.style.boxShadow = '15px 15px 20px rgba(0, 0, 0, 0.6)';
});

多层阴影效果

通过逗号分隔多个 box-shadow 值实现多层阴影。

.multi-shadow {
  box-shadow: 
    3px 3px 5px rgba(0, 0, 0, 0.2),
    6px 6px 10px rgba(0, 0, 0, 0.1);
}

内阴影效果

使用 inset 关键字实现内阴影。

.inset-shadow {
  box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}