[分享]css单独图片边框设置颜色吗

 CSS单独图片边框设置颜色吗？如果你想让图片的边框与其他元素的边框颜色不同，或者想让每个边框颜色不同，那么你需要单独为图片添加边框颜色。你可以使用CSS中的`border`属性来添加边框，例如：cs...

 CSS单独图片边框设置颜色吗？
如果你想让图片的边框与其他元素的边框颜色不同，或者想让每个边框颜色不同，那么你需要单独为图片添加边框颜色。
你可以使用CSS中的`border`属性来添加边框，例如：

css
img {
  border: 2px solid red;
} 

这将在每个图片周围添加一个2像素宽，红色实线边框。
但是如果你要单独为每个图片设置不同的边框颜色，那么您可以使用CSS伪类`:after`和`:before`来实现。
首先，为了将这些伪元素放置在图片之外，我们需要为每个图片添加`position: relative`样式，这将使伪元素相对于当前图片进行定位。

css
img {
  position: relative;
} 

接下来，我们使用`:before`伪类来为图片添加一个上边框，使用`:after`伪类为图片添加一个下边框。

css
img:before {
  content: ';
  position: absolute;
  top: 0;
  left: -2px;
  height: 2px;
  width: calc(100% + 4px); /* 加上左右2px的宽度 */
  background-color: blue;
}

img:after {
  content: ';
  position: absolute;
  bottom: 0;
  left: -2px;
  height: 2px;
  width: calc(100% + 4px); /* 加上左右2px的宽度 */
  background-color: green;
} 

如上所述，我们设置了伪元素的位置和大小，并使用`background-color`属性设置不同的颜色。请注意，由于上下边框与边缘相邻，因此我们在左侧添加了`-2px`的负左边距，以保持边框与图片之间的距离。
这就是使用CSS单独为图片设置边框颜色的方法。
代码示例：

html
<p>
  <img src="path/to/image.jpg" alt="image">
</p>
 
<style>
  p {
    margin: 30px;
  }
 
  img {
    position: relative;
  }
 
  img:before {
    content: ';
    position: absolute;
    top: 0;
    left: -2px;
    height: 2px;
    width: calc(100% + 4px);
    background-color: blue;
  }
 
  img:after {
    content: ';
    position: absolute;
    bottom: 0;
    left: -2px;
    height: 2px;
    width: calc(100% + 4px);
    background-color: green;
  }
</style>