在现代网页设计中，图片阴影效果能够显著提升视觉体验，使得图片更加立体，具有更强的空间感。HTML5提供了多种方式来实现图片阴影效果，无需依赖JavaScript或外部库，以下将详细介绍几种简单易行的实现方法。

一、CSS盒阴影（Box Shadow）

CSS盒阴影是最常见的实现图片阴影的方法。通过设置box-shadow属性，可以为图片添加阴影效果。

1.1 基本语法

img {
    /* 设置阴影颜色、水平偏移量、垂直偏移量、模糊距离、扩展距离 */
    box-shadow: color x-offset y-offset blur spread;
}
  • 颜色：阴影的颜色，可以是任何有效的CSS颜色值。
  • x-offset：阴影的水平偏移量，正值向右偏移，负值向左偏移。
  • y-offset：阴影的垂直偏移量，正值向下偏移，负值向上偏移。
  • blur：阴影的模糊程度，值越大，阴影越模糊。
  • spread：阴影的扩展程度，正值使阴影扩散，负值使阴影缩小。

1.2 代码示例

<img src="image.jpg" alt="Image with shadow" style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);">

1.3 动画效果

为了增强阴影效果，可以结合CSS动画（如@keyframes）来实现阴影的动态效果。

@keyframes shadow-move {
    0% {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.7);
    }
    100% {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }
}

img {
    animation: shadow-move 3s infinite alternate;
}

二、SVG滤镜（Filter）

SVG滤镜可以实现更复杂的阴影效果，通过组合多种滤镜元素，如<feGaussianBlur>、<feOffset>、<feMerge>等。

2.1 SVG滤镜基本语法

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <!-- 创建滤镜 -->
    <defs>
        <filter id="shadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>
            <feMerge>
                <feMergeNode in="offsetBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <!-- 使用滤镜 -->
    <image href="image.jpg" filter="url(#shadow)" alt="Image with complex shadow"/>
</svg>

2.2 代码示例

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <defs>
        <filter id="shadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur"/>
            <feMerge>
                <feMergeNode in="offsetBlur"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <image href="image.jpg" filter="url(#shadow)" alt="Image with complex shadow"/>
</svg>

三、JavaScript实现阴影效果

虽然CSS和SVG提供了丰富的阴影效果实现方法，但有时候仍需要JavaScript来完成更复杂的阴影动画或交互效果。

3.1 JavaScript阴影效果基本语法

function createShadow(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, img.width, img.height);
    return canvas.toDataURL();
}

var img = document.createElement('img');
img.src = 'image.jpg';
img.onload = function() {
    var shadow = createShadow(this);
    img.src = shadow;
};

3.2 代码示例

function createShadow(img) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, img.width, img.height);
    return canvas.toDataURL();
}

var img = document.createElement('img');
img.src = 'image.jpg';
img.onload = function() {
    var shadow = createShadow(this);
    img.src = shadow;
};

四、总结

通过以上介绍，相信你已经学会了如何在HTML5中实现图片阴影效果。在实际应用中，可以根据需求和场景选择合适的方法。无论是CSS盒阴影、SVG滤镜还是JavaScript，都能为你的网页设计增添独特的视觉魅力。