在 web 开发中，很多时候我们需要为图片添加内边框，以达到美观的效果。CSS 提供了 `border` 属性用于设置图片的边框，其中包括边框的颜色、宽度和样式等。我们可以利用该属性为图片添加内边框。 首先，我们需要将图片放置在一个容器中，然后为该容器设置相应的边框属性。例如，我们可以通过 CSS 代码来为图片容器添加 5px 的红色实线边框，并将其内边距设为 10px： ```html

以下是一个带有内边框的图片示例：

<div class="image-container">
<img src="example.jpg" alt="">
</div>
<style>
.image-container {
border: 5px solid red;
padding: 10px;
}
</style>

在上述示例代码中，我们通过为 `div` 元素添加 `class="image-container"` 来定义图片容器，并在 CSS 样式表中为其设置边框和内边距属性。接下来，我们只需要在容器中插入图片，即可实现带有内边框的效果。 除了通过设置 `border` 和 `padding` 属性来实现内边框效果外，我们还可以使用 CSS 伪类 `:after` 和 `:before` 来添加图片边框。具体来说，我们可以为容器添加 `position: relative`，然后使用 `:after` 或 `:before` 伪类创建一个绝对定位的元素作为边框，最后再通过 CSS 样式表来设置边框颜色、宽度和样式。以下是一个示例： ```html

以下是另一个带有内边框的图片示例：

<div class="image-container-2">
<img src="example.jpg" alt="">
</div>
<style>
.image-container-2 {
position: relative;
display: inline-block;
}
.image-container-2:before {
content: '';
display: block;
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 5px solid blue;
}
</style>

在上述示例代码中，我们为图片容器添加 `class="image-container-2"`，并在 CSS 样式表中为其设置 `position: relative` 和 `display: inline-block` 属性。然后，我们使用 `:before` 伪类创建一个绝对定位的元素，并为其设置 `content: ''`、`border` 和位置等属性，从而实现内边框效果。 总之，CSS 提供了多种方法来实现图片内边框的效果。在实际开发过程中，我们可以根据需要选择合适的方法进行实现，以达到最佳的效果。