介绍
在网页开发中，图片是不可或缺的一部分。为了让网页更加美观，常常需要对图片进行特殊的处理。在本文中，我们将学习如何在CSS中为图片添加两个边框。
准备工作
在开始之前，我们需要准备一张图片，以及一个包含该图片的HTML元素。
<div class="image-container">
<img src="example.jpg" alt="example">
</div>
添加第一个边框
首先，我们将为图片添加一个边框。我们可以使用border属性来实现这个效果。
.image-container img {
border: 2px solid #000;
}
在上述代码中，我们将图片的边框宽度设置为2像素，颜色设置为黑色。
添加第二个边框
接下来，我们将为图片添加第二个边框。我们可以使用CSS多重边框来实现这个效果。
使用CSS多重边框可以让我们为一个元素设置多个边框。我们可以通过多种方式控制这些边框的样式，例如颜色，宽度和样式等。
下面是一个实现多重边框的示例代码：
.image-container img {
border: 2px solid #000;
border-style: solid double;
border-color: #000 #fff;
padding: 6px;
}
在上述代码中，我们使用border-style属性设置边框的样式。我们将第一个边框设置为实线，第二个边框设置为双线。
我们还使用border-color属性分别设置了两个边框的颜色。另外，我们还为元素添加了padding属性，以增加第二个边框与第一个边框之间的距离。
完整代码
下面是最终的CSS代码，用于为图片添加两个边框：
.image-container img {
border: 2px solid #000;
border-style: solid double;
border-color: #000 #fff;
padding: 6px;
}
我们将这段代码放在样式表中，并将元素的类名设置为image-container。
结论
本文介绍了如何在CSS中为图片添加两个边框。我们首先使用border属性添加第一个边框，然后使用CSS多重边框添加第二个边框。