在HTML5中，我们可以通过CSS样式来为图片添加内阴影效果。以下是一个简单的示例，展示如何为图片添加内阴影。

基本原理

CSS提供了box-shadow属性，可以用来为元素添加阴影效果。对于图片，我们可以将其包装在一个div元素中，然后对这个div应用box-shadow属性。

示例代码

以下是一个HTML和CSS结合的示例，演示如何为图片添加内阴影：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片内阴影示例</title>
<style>
  .shadow-box {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
  }

  .shadow-box img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .shadow-box::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: inherit;
    pointer-events: none;
    z-index: -1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>

<div class="shadow-box">
  <img src="path-to-your-image.jpg" alt="示例图片">
</div>

</body>
</html>

代码解释

  1. HTML结构：我们创建了一个div元素，类名为shadow-box，然后在这个div中放置了一个img元素。

  2. CSS样式：

    • .shadow-box：设置了position: relative，使得.shadow-box::after元素可以相对于它定位。
    • .shadow-box img：确保图片可以充满其容器。
    • .shadow-box::after：这是一个伪元素，用于创建阴影效果。它被定位在.shadow-box内部，并且设置了与.shadow-box相同的背景和指针事件（pointer-events: none），这样点击图片时不会触发阴影。
    • box-shadow：设置了阴影的位置（0 0）、模糊半径（10px）、扩展半径（0）和颜色（rgba(0, 0, 0, 0.5)，半透明黑色）。

通过上述代码，图片周围将出现一个内阴影效果。你可以根据需要调整box-shadow属性的各个值，以达到你想要的效果。