[分享]css中怎么图片加两个边框

在CSS中，我们可以使用边框属性（border）来给一个元素添加边框，但是如果我们想让一张图片同时拥有两个边框，该怎么实现呢？下面介绍两种方法：方法一：使用伪元素（:before和:after）来实现...

在CSS中，我们可以使用边框属性（border）来给一个元素添加边框，但是如果我们想让一张图片同时拥有两个边框，该怎么实现呢？下面介绍两种方法：
方法一：使用伪元素（:before和:after）来实现
首先，我们需要给图片元素（img）添加一个类名，比如叫做“double-border”，然后在CSS中编写如下代码：

 .double-border {<br>
   position: relative;<br>
   border: 2px solid #ccc;  /*第一个边框样式*/<br>
}<br>
.double-border::before, .double-border::after {<br>
   content: "";<br>
   position: absolute;<br>
   top: -2px;<br>
   left: -2px;<br>
   right: -2px;<br>
   bottom: -2px;<br>
   border: 2px solid #000; /*第二个边框样式*/<br>
}<br>
.double-border::after {<br>
   z-index: -1; /*让第二个边框在第一个边框下面显示*/<br>
}

以上代码中，我们通过将图片元素（img）的位置属性设置为“relative”，使得伪元素（:before和:after）的位置相对于图片元素（img）来定位。然后，我们分别使用:before和:after伪元素来添加第一个和第二个边框，具体的边框样式可以根据需求进行调整。
方法二：使用box-shadow属性来实现
另一种实现方式是使用CSS3中的box-shadow属性，在一个元素上添加多个阴影实现多重边框的效果。同样需要给图片元素（img）添加一个类名，比如叫做“double-border”，然后在CSS中编写如下代码：

 .double-border {<br>
   box-shadow: <br>
      0 0 0 2px #ccc, /*第一个边框样式*/<br>
      0 0 0 4px #000; /*第二个边框样式*/<br>
}

以上代码中，我们使用了两个阴影样式分别代表第一个和第二个边框。其中，参数依次表示由左侧距离、由上方距离、阴影模糊度、阴影大小和颜色。我们通过调整这些参数的值，可以实现不同样式的多重边框效果。
综上所述，以上两种方法都可以实现图片拥有多重边框的效果，具体选择哪种实现方法，可以根据实际需求和情况来考虑。