介绍
在实际的web开发中, 我们很可能需要对一些图片添加边框。但是这些图片可能来自于很多不同的地方，例如来自数据库、后端API、CDN等，对这些图片一一手动添加样式不仅繁琐，而且容易出错。因此，我们需要知道如何使用 CSS 来改变图片的边框颜色，这样我们就可以在全站的图片上快速的添加统一的外观。
样式-使用 border 属性
首先介绍较为简单的方式，即使用 CSS 的 border 属性为图片添加边框。这种方式适用于我们想要添加简单的颜色边框的情况。下面是一个示例代码：
<style>
img {
border: 1px solid red;
}
</style>
<img src="example.png" alt="example">
在这段代码中，我们为 img 添加了样式，其中 border 属性指定了边框的颜色、宽度和样式。这里我们添加了一个红色的实线边框，可以根据需求修改样式，进行各种不同的样式设置。
样式-使用 box-shadow 属性
在有些时候，我们希望图片的边框不仅具有颜色，还具有一些其他的效果，例如阴影、扩散等。这时，我们可以使用 box-shadow 属性为图片添加 “边框效果”，例如：
<style>
img {
box-shadow: 0 0 10px rgba(255, 0, 0, 1);
}
</style>
<img src="example.png" alt="example">
在这里，我们使用 box-shadow 属性来为图片添加一个红色的阴影效果。box-shadow 属性共有5个值，分别代表了阴影的水平偏移量、垂直偏移量、模糊半径、扩散半径和阴影颜色。这里我们为了突出阴影效果，将模糊半径和扩散半径设为了一个比较大的值，而阴影颜色则使用了纯红色。
样式-精细控制边框
在有些情况下，我们需要通过精细控制来改变图片边框的颜色和样式。下面是一个精细控制边框的代码示例：
<style>
.my-border {
border-width: 4px;
border-style: dotted;
border-color: blue;
}
</style>
<img src="example.png" alt="example" class="my-border">
在这里，我们首先定义了一个带有蓝色点状边框的样式类 my-border，其中我们设置了边框颜色为蓝色（border-color），边框样式为点状（border-style），边框宽度为 4px（border-width）。然后，我们将这个样式类应用到图片上，从而使图片获得了这个边框样式。
总结
通过上面介绍的三种方法，我们可以在网页中为图片添加不同的边框效果，也可以通过精细的CSS控制来更改边框的颜色、宽度和样式。当然，除了这三种方法，还有很多其他的方式可以改变图片的边框，其中会涉及更多的CSS知识和技巧。对于前端工程师来说，熟练使用CSS控制图片边框样式，不仅能够让我们将网页样式更加出色，也能提高我们的效率。
