html - 如何在我的圆形图像周围放置多色边框？

Question

我需要在我的圆形图像周围放置一个多色边框。 example borders

我尝试了各种在线指南，但我似乎无法掌握它。

我尝试使用线性渐变，但最后在 Angular 落里有 4 个点，就好像图像是正方形的，没有边框。

.img-border1 {
  border: 6px solid #e42c64;
  border-radius: 50%;
}

.img-border2 {
  border: 6px solid;
  border-radius: 50%;
  background-image: linear-gradient(red 33.33%, blue 33.33%, yellow 33.33%);
}

<div class="col-lg-4">
  <img class="img-res img-border1 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
  <h2>My Simon Game</h2>
  <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
  <p><a class="btn btn-secondary" href="https://rbas30.github.io/simon-game/" role="button">Play the game »</a></p>
</div>

<div class="col-lg-4">
  <img class="img-res img-border2 rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

Answer 1

这是一个使用更多标记和伪元素的示例:

.image-wrap {
  position: relative;
  padding: 6px;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  box-sizing: border-box;
  overflow: hidden;
  background: blue;
  z-index: 1;
  background-clip: padding-box;
}

.image-wrap-inner {
  overflow: hidden;
  border-radius: 50%;
  width: 128px;
  height: 128px;
}

.image-wrap img {
  position: relative;
  z-index: 10;
  top: -6px;
  left: -6px;
}

.img-border-two::before {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: green;
  position: absolute;
  top: 0;
  left: 70px;
  z-index: 2;
}

.img-border-three::before {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: purple;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: matrix(2, 1, 2, -1, 0, 140);
}

.img-border-three::after {
  content: '';
  display: block;
  height: 140px;
  width: 140px;
  background: red;
  position: absolute;
  top: 0;
  left: 70px;
  z-index: 2;
}

<div class="col-lg-4">
  <div class="image-wrap img-border-two">
    <div class="image-wrap-inner">
      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
    </div>
  </div>

  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>


<div class="col-lg-4">
  <div class="image-wrap img-border-three">
    <div class="image-wrap-inner">
      <img class="img-res rounded-circle" src="https://placehold.it/140x140" alt="simon-game" width="140" height="140">
    </div>
  </div>

  <h2>Heading</h2>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
  <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

注意事项:

1. 这不是响应式的，因此您的图片将始终为 140 像素 x 140 像素。
2. 如果您调整图像的宽度/高度或 .image-wrap 上的 padding，您还需要更改 .image-wrap- inner width 和 height 用于填充/大小变化。